聊天

聊天实现过程

信息结构图

数据绑定

这里在获取数据基础元素上，对代码中用到的变量直接进行了初始化
1.在提示区中选择<span>→逻辑→数据绑定→绑定模式：html内容绑定→绑定参数：chat7messagecon (消息内容字段机读名)。
2.在提示区中选择<div>→逻辑→数据绑定→绑定模式：条件判断绑定→绑定参数：pd。（pd表示的是对发送人的判断，通过条件判断，实现显示在左边还是右边的问题）
3.在提示区中选择<div>→逻辑→数据绑定→绑定模式：条件判断绑定→绑定参数：!pd。
4.在提示区中选择<div>→逻辑→数据绑定→绑定模式：数组绑定→绑定参数：chat 。（返回数据的数组）

数据绑定步骤

1. 页面添加 服务器反向通知元素 。
2. 给服务器反向通知元素添加数据绑定---属性绑定内容为　{"data-x-wid":socketid,"data--wsurl":"/group/"+id()}
3. 发送消息时，聊天记录表要创建2条记录，一个所属人是自己另一个是对方
- 4. 发送视口“发送通知信息”代码段

          /*INSBEGIN:WSNOTIFY*/
          function() {
            return reqlib('msgbroker');
          },
          function(msgbroker) {

            var domain = "lxtx.com";
            var uid = inputs.id;
            var msg = {
              "command": "MESSAGE",
              "headers": {
                "random": Math.random(),
                "subscription": "sub-0"
              },
              "body": ""
            };
            msg.headers._runCommand = JSON.stringify([{
              "command": "vmArrFuc",
              "params": [
                "push",
                "chat2", {
                  "chat7messagecon": inputs.chat7messagecon,
                  "pd": "pd",
                  "chat7sendtim": tmp_data.chat1.chat7sendtim,
                  "chat7messageper": tmp_data.chat1.chat7messageper,
                  "chat7messagerec": tmp_data.chat1.chat7messagerec,
                  "yonghu1": tmp_data.yonghu2.username,
                  "yonghu2": tmp_data.yonghu1.username,
                  "chat7recordthep": tmp_data.chat1.chat7messagerec,
                  "_id": tmp_data.chat1._id
                }
              ]
            },{
                "command": "updatelv",
                "params": [{
                  "gundong": tmp_data.gundong
                }]
              }]);

            return msgbroker.notifyuser(domain, uid, msg);


          },
          //@wweditorinfo:{"id":"a189fffd8eceaebf0c6c516cba3d15c0","editor":{"step1":{"isGroup":false},"stepUser":{"domain":{"from":"const","value":"test.com"},"uid":{"from":"inputs","value":"id"},"msg":{"from":"inputs","value":"chat7messagecon"},"isFilter":false}}}
          /*INSEND:WSNOTIFY*/

4. 发送页面尾部追加的代码

/*INSBEGIN:STDOUT*/
          function() {
            _.extend(finish_data, {
              "success": true,
              "_runCommand": [{
                "command": "vmArrFuc",
                "params": ["push", "chat", {
                 "chat7messagecon": inputs.chat7messagecon,
                "pd": false,
                "chat7sendtim": tmp_data.chat1.chat7sendtim,
                "chat7messageper": tmp_data.chat1.chat7messageper,
                "chat7messagerec": tmp_data.chat1.chat7messagerec,
                "yonghu1": tmp_data.yonghu1.username,
                "yonghu2": tmp_data.yonghu2.username,
                "chat7recordthep": tmp_data.chat1.chat7recordthep,
                "_id": tmp_data.chat1._id
                }]
              }, {
                "command": "updatelv",
                "params": [{
                  "gundong": tmp_data.gundong
                }]
              }]
            });
          },
          //@wweditorinfo:{"id":"cf760ed9cbd5d5e99d047f3b7ac9dad0","editor":{"jsonValue":{"success":true,"_runCommand":[{"command":"vmArrFuc","params":["push","数组变量名",{"属性名1":"属性值1"},{"属性名2":"属性值2"}]},{"command":"updatelv","params":[{"a":"newValue"}]}]},"steppurpose":{"purpose":"finishdata"}}}
          /*INSEND:STDOUT*/

注意：发送消息时要 1→2→3→4依次进行

5.读取时注意的细节，例如：

查询条件：要根据记录所属人id是自己并且发送人是对方接收人是自己，或者记录所属人id是自己并且发送人是自己接收人是对方。

yonghu1　和 yonghu2　分别为聊天两个人的名称，通过绑定变量名，实现右边现实当前用户，左边显示聊天的对象用户名

然后再通过发送人是不是自己来控制显隐（可以使用条件判断和否定条件判断 pd），如果发送人是自己就显示在右边，否则显示在左边

          /*INSBEGIN:CUSTOM*/
          function() {
            _.each(tmp_data.chat, function(v, k, l) {
              v.pd = "";
              v.yonghu1 = tmp_data.yonghu1.username;
              v.yonghu2 = tmp_data.yonghu2.username;
              if (v.chat7messageper === tmp_data.yhid) {
                v.pd = false;
              } else {
                v.pd = "pd";
              }
            });
          },
          /*INSEND:CUSTOM*/

注意：如果按以上步骤操作以后没有实时刷新，请更新wide 里面的“强制更新node” 再试一次。