小程序的对话集合

最近在写小程序的对话列表，主要是JSON数据的处理。

主要问题：

1.调用微信提供的WebSocketApi，这个在官方有详细的例子。

2.对接收和发送的JSON数据进行处理。

3.处理完后，显示在布局中。

主要是用的 WebSocket协议。

微信封装的方法有：

1.wx.connectSocket(OBJECT)
创建一个 WebSocket 连接；一个微信小程序同时只能有一个 WebSocket 连接，如果当前已存在一个 WebSocket 连接，会自动关闭该连接，并重新创建一个 WebSocket 连接。

2.wx.onSocketOpen(CALLBACK)
监听WebSocket连接打开事件。

3.wx.onSocketError(CALLBACK)
监听WebSocket错误。

4.wx.sendSocketMessage(OBJECT)
通过 WebSocket 连接发送数据，需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。

5.wx.onSocketMessage(CALLBACK)
监听WebSocket接受到服务器的消息事件。

6.wx.closeSocket()
关闭WebSocket连接。wx.onSocketClose(CALLBACK)
监听WebSocket关闭。

一、接收信息代码，用的是JSON.parse()方法。

//注意这里的that是 let that = this;
wx.onSocketMessage(function(res) {
        console.log('收到服务器内容：' + res.data)
        console.log('收到内容：' + res.data.content)
        //方法将一个符合JSON语法的字符串解析成一个对应类型的值或对象
        var message = JSON.parse(res.data);
        //把数据放入变量allContentList中
        that.data.allContentList.push(message);
        //保存数据
        that.setData({
           allContentList: that.data.allContentList
        });
        //把数据存储到本地
        wx.setStorage({
          key:mthat.data.orderid,
          data:that.data.allContentList
        })
      })

二、发送信息代码，和接收正好相反用的是JSON.stringify()方法，并且是多了一个wx.sendSocketMessage方法。

      var message = new Object;
      message.to= '1';//接受者
      message.from = '2';//发送者
      message.content = '你好';
      message.type= "doctxt";
      message.name='张三';

      // 用于从一个对象解析出字符串
      JSON.stringify(message);

      let that = this;
      //把数据放入变量allContentList中
      that.data.allContentList.push(message);
      //保存数据
      that.setData({
         allContentList: that.data.allContentList
      })   
      //发送数据
      wx.sendSocketMessage({
        data:JSON.stringify(message)
      });
      //把数据存储到本地
      wx.setStorage({
        key:mthat.data.orderid,
        data:that.data.allContentList
      })

这是wxml文件的代码：

<view class="wrap"> 
    <button bindtap="setClear">clear</button>
    <view class="containerBox" style="">
       <view wx:for="{{allContentList}}">
            <view wx:if="{{item.to == message_to}}"  class="message-text" style="">{{item.content}}</view>

            <view   wx:if="{{item.to != message_to}}" class="message-sent-text">{{item.content}}</view>
       </view>
    </view>
    <form bindsubmit="formSubmit">
    <view class="handleBox">
        <input  class="input_submit" name="sendinput" placeholder="输入聊天的内容" value="{{inputTemp}}" bindinput="bindKeyInput"/>
        <button type="default" class="btn_submit" size="mini" bindtap="submit" formType="submit">发送</button>
    </view>
    </form>
</view>

效果图如下：