微信小程序之 WebSocket练习

约定不等于承诺〃 2023-06-08 06:13 2阅读 0赞

效果图展示：

![20191016191844909.gif][]

简单描述：

> 页面刚一打开的时候，会从后端的服务器上，给用户主动发送消息。
> 
> 然后用户拿到服务器推送的数据和里面的新的session，下次给服务器发送消息的时候，会用到这个session。

代码展示：

var that, SocketTask,http_session,session,
      socketOpen = false;
    var app = getApp();
    Page({
      data: {
        message:[]  // 服务器返回的消息
      },
      onLoad: function (options) {
        that = this;
        that.openBtnClick();
      },
      // 开启连接
      openBtnClick:function(){
        that = this;
        that.connectSocketFn();
        that.initSocket();
      },
      // 发送消息
      sendBtnClick:function(){
        that = this;
        app.promise.then((res) => {
          http_session = res;
          console.log('res---http_session', http_session);
          var data1 = {
            cmd: 1,
            type: 1,
            signType: 'BASE64',
            session: that.data.new_session,   // 提交的session
            body: '123',
            http_session: http_session
          }
          console.log('socketOpen===', socketOpen);
          if (socketOpen) {
            that.sendSocketMessageFn(data1);
          } else {
            that.openBtnClick();
          }
        })
      },
      // 关闭连接
      closeBtnClick:function(){
        if (SocketTask) {
          SocketTask.close(function (close) {
            console.log('关闭 WebSocket 连接。', close)
          })
        }
      },
      // 连接
      connectSocketFn: function () {
        SocketTask = wx.connectSocket({
          url: app.webS_url,
          header: {
            'content-type': 'application/json'
          },
          success: (res) => {
            socketOpen = true;
            console.log('开启连接成功', res);
          },
          fail: (error) => {
            console.log('开启连接失败', error);
          }
        })
      },
      // socket监听
      initSocket:function(){
        that = this;
        // console.log(SocketTask);
        // 监听打开
        SocketTask.onOpen(res=>{
          console.log('socket监听打开',res);
          socketOpen = true;
          // 首次进来没有session，服务器主动发送的一条消息
          console.log('open  session',session);
          if(session == undefined || session == null){
            app.promise.then((res) => {
              http_session = res;
              var data = {
                cmd: 2,
                ofType: 1,
                ofOperatorType: 2,
                http_session: http_session
              }
              console.log('open传入的参数', data);
              that.sendSocketMessageFn(data);
            });
          }
        })
        // 监听关闭
        SocketTask.onClose(res=>{
          console.log('socket监听关闭', res);
          socketOpen = false;
          SocketTask = false;
        })
        // 监听错误
        SocketTask.onError(res => {
          console.log('socket监听错误', res);
        })
        // 接受服务器的消息
        SocketTask.onMessage(res => {
          console.log('接受服务器返回的信息', JSON.parse(res.data));
          var msg = JSON.parse(res.data);
          that.setData({
            new_session: msg.session    // 新的session，用来会话
          })
          let is_ai_arr = msg.body;
          if(res.cmd == 3){
            that.session_pro = new Promise((resolve)=>{
              session = msg.session;
              console.log('接受服务器的消息session===',session);
              resolve(session);
            })
          }
        })
      },
      
      // 传给服务器的值
      sendSocketMessageFn:function(msg){
        console.log('通过 WebSocket 连接发送数据',socketOpen,JSON.stringify(msg));
        if (socketOpen){
          SocketTask.send({
            data: JSON.stringify(msg)
          })
        }
      }
    })

\--------暂完。

下周有时间，重新更新一版前后端的。

[20191016191844909.gif]: /images/20230531/e4cf3859ceab45d38d595cc69b1ccdd2.png