评论

试了一下小程序的websocket,提供个简单的代码吧

websocket

var util = require('../../../utils/util.js');
 
var socketOpen = false;
 
var frameBuffer_Data, session, SocketTask;
 
var url = 'wss://wss......./Chat';
 
Page({
 
  /**
 
   * 页面的初始数据
 
   */
 
  data: {
 
    toView: 'green',
 
    windowH: "1000",
 
    user_input_text: '', //用户输入文字
 
    inputValue: '',
 
    returnValue: '',
 
    addImg: false,
 
    //格式示例数据,可为空
 
    allContentList: [],
 
    num: 0,
 
    wo: "",
 
    ta: "",
 
    youImg: ""
 
  },
 
  scrollToTop() {
 
    const that = this;
 
    this.setAction({
 
      scrollTop: that.windowH
 
    })
 
  },
 
  bindKeyInput: function(e) {
 
    this.setData({
 
      inputValue: e.detail.value
 
    })
 
  },
 
  // 提交文字
 
  submitTo: function(e) {
 
    let that = this;
 
    var content = that.data.inputValue;
 
    var data = {
 
      // body: that.data.inputValue,
 
      "name": that.data.wo,
 
      "content": content,
 
      "type": 5,
 
      "toName": that.data.ta
 
    }
 
    //静态显示
 
    this.data.allContentList.push({
 
      "id": "",
 
      "hx_id": "",
 
      "wo": that.data.wo,
 
      "ta": that.data.ta,
 
      "content": content,
 
      "voice_url": "",
 
      "fileurl": null,
 
      "create_date": util.formatTime
 
    });
 
    this.setData({
 
      allContentList: this.data.allContentList,
 
      inputValue: ''
 
    })
 
    //至底
 
    that.bottom();
 
    //socket
 
    if (socketOpen) {
 
      // 如果打开了socket就发送数据给服务器
 
      that.sendSocketMessage(data);
 
    }
 
  },
 
  //通过 WebSocket 连接发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。
 
  sendSocketMessage: function(msg) {
 
    var that = this;
 
    console.log('通过 WebSocket 连接发送数据', JSON.stringify(msg))
 
    // debugger
 
    SocketTask.send(
 
      {
 
      data: JSON.stringify(msg)
 
      },
 
      function (res){
 
          console.log('已发送', res)
 
      }
 
    )
 
  },
 
  addImg: function(e) {
 
    var a = this.data.addImg;
 
    if (a == true) {
 
      this.setData({
 
        addImg: false
 
      })
 
    } else {
 
      this.setData({
 
        addImg: true
 
      })
 
    }
 
  },
 
  tap() {
 
    for (let i = 0; i < order.length; ++i) {
 
      if (order[i] === this.data.toView) {
 
        this.setData({
 
          toView: order[i + 1],
 
          scrollTop: (i + 1) * 200
 
        })
 
        break
 
      }
 
    }
 
  },
 
  tapMove() {
 
    this.setData({
 
      scrollTop: this.data.scrollTop + 10
 
    })
 
  },
 
  /**
 
   * 生命周期函数--监听页面加载
 
   */
 
  onLoad: function(options) {
 
    const that = this;
 
    that.setData({
 
      ta: options.tel,
 
      youImg: options.youImg,
 
      wo: util.phone
 
    })
 
    // 获取设备高度
 
    wx.getSystemInfo({
 
      success: function(res) {
 
        var clientHeight = res.windowHeight,
 
          clientWidth = res.windowWidth,
 
          rpxR = 750 / clientWidth;
 
        var helfH = clientHeight * 1 * rpxR;
 
        //var textH = helfH - 100;
 
        that.setData({
 
          windowH: helfH
 
        });
 
      }
 
    });
 
    //加载历史数据
 
    // util.apiHtml +http://localhost:9193
 
   
 
    //修改已读
 
   
 
     
 
  },
 
  /**
 
   * 生命周期函数--监听页面初次渲染完成
 
   */
 
  onReady: function() {
 
    var that = this;
 
     
 
    SocketTask.onOpen(res => {
 
      socketOpen = true;
 
      console.log('监听 WebSocket 连接打开事件。', res)
 
      //发送登陆信息
 
      var data = {
 
        // body: that.data.inputValue,
 
        "Name": that.data.wo,
 
        "content": "login",
 
        "type": 4
 
      }
 
      that.sendSocketMessage(data);
 
      //循环发送心跳
 
      setInterval(
 
        function () {
 
          var ping = { "type": "ping" };
 
          that.sendSocketMessage(ping);
 
        }, 20000
 
      );  
 
    })
 
    SocketTask.onClose(onClose => {
 
      console.log('监听 WebSocket 连接关闭事件。', onClose)
 
      socketOpen = false;
 
      this.webSocket()
 
    })
 
    SocketTask.onError(onError => {
 
      console.log('监听 WebSocket 错误。错误信息', onError)
 
      socketOpen = false
 
    })
 
    SocketTask.onMessage(onMessage => {
 
      console.log("onMessage:::::"+onMessage.data);
 
      if (onMessage.data.indexOf("上线") != -1 || onMessage.data.indexOf("下线") != -1) {
 
        return;
 
      }
 
      console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', JSON.parse(onMessage.data))
 
      var onMessage_data = JSON.parse(onMessage.data)
 
      if (onMessage_data.toName == that.data.wo && onMessage_data.name == that.data.ta) {
 
        // addmsglist1(msg1.name, msg1.content)
 
        that.data.allContentList.push({
 
          "id": "",
 
          "hx_id": "",
 
          "wo": that.data.ta,
 
          "ta": that.data.wo,
 
          "content": onMessage_data.content,
 
          "voice_url": "",
 
          "fileurl": null,
 
          "create_date": util.formatTime
 
        });
 
        that.setData({
 
          allContentList: that.data.allContentList
 
        })
 
        that.bottom();
 
      }
 
    })
 
  },
 
  // 获取hei的id节点然后屏幕焦点调转到这个节点 
 
  bottom: function() {
 
    var that = this;
 
    this.setData({
 
      scrollTop: 1000000
 
    })
 
  },
 
  /**
 
   * 生命周期函数--监听页面显示
 
   */
 
  onShow: function() {
 
    if (!socketOpen) {
 
      this.webSocket()
 
    }
 
  },
 
  webSocket: function() {
 
    const that = this;
 
    // 创建Socket
 
    SocketTask = wx.connectSocket({
 
      url: url,
 
      data: 'data',
 
      header: {
 
        'content-type': 'application/json'
 
      },
 
      method: 'post',
 
      success: function(res) {
 
        console.log('WebSocket连接创建', res)
 
         
 
      },
 
      fail: function(err) {
 
        wx.showToast({
 
          title: '网络异常!',
 
        })
 
        console.log(err)
 
      },
 
    })
 
      
 
  },
 
  /**
 
   * 生命周期函数--监听页面隐藏
 
   */
 
  onHide: function() {
 
    SocketTask.close(function (res) {
 
      console.log(res);
 
    })
 
  },
 
  /**
 
   * 生命周期函数--监听页面卸载
 
   */
 
  onUnload: function() {
 
    SocketTask.close(function(res){
 
      console.log(res);
 
    })
 
  },
 
  /**
 
   * 页面相关事件处理函数--监听用户下拉动作
 
   */
 
  onPullDownRefresh: function() {
 
  },
 
  /**
 
   * 页面上拉触底事件的处理函数
 
   */
 
  onReachBottom: function() {
 
  },
 
  /**
 
   * 用户点击右上角分享
 
   */
 
  onShareAppMessage: function() {
 
  }
 
})


最后一次编辑于  2019-05-16  
点赞 3
收藏
评论

8 个评论

  • 物华天宝
    物华天宝
    2019-05-15

    老哥,能不能注意一下格式

    2019-05-15
    赞同 2
    回复 4
  • MUJO
    MUJO
    2019-05-16

    感谢分享

    2019-05-16
    赞同 1
    回复
  • 。。。
    。。。
    2022-03-21

    虽然乱,但还是可以用

    2022-03-21
    赞同
    回复
  • 🤥
    🤥
    2020-04-16

    老哥,SocketTask.onOpen() 这个方法偶尔才触发怎么解决

    2020-04-16
    赞同
    回复
  • Geefib
    Geefib
    2019-05-23

    强烈建议使用SocketTask,使用wx.sendSocketMessage有几率报taskID not exist的问题

    2019-05-23
    赞同
    回复 7
    • ゛ 安如少年初如梦
      ゛ 安如少年初如梦
      2019-05-23

      这是最初版本,后面自己封装到APPJS里了,全局用,目前还没出现问题

      2019-05-23
      回复
    • Geefib
      Geefib
      2019-05-23

      恩恩

      2019-05-23
      回复
    • K
      K
      2019-09-03回复゛ 安如少年初如梦
      有没有最终版本 或者项目demo可以借鉴? 我最近想实现这个功能 但是第一次写 不怎么会
      2019-09-03
      回复
    • ゛ 安如少年初如梦
      ゛ 安如少年初如梦
      2019-09-04回复K
      以上其实就是单页面相对简单的demo了,只是没有后台服务,后台根据自己情况搭建一个才可以
      2019-09-04
      回复
    • K
      K
      2019-09-04回复゛ 安如少年初如梦
      关键是没wxml代码 我不知道你有些是干什么用的 最近在做在线聊天功能 想借鉴借鉴
      2019-09-04
      回复
    查看更多(2)
  • 努力向前
    努力向前
    2019-05-21

    有点乱,还可以

    2019-05-21
    赞同
    回复
  • ゛ 安如少年初如梦
    ゛ 安如少年初如梦
    2019-05-16

    好的,,,我看怎么改


    2019-05-16
    赞同
    回复
  • 老五
    老五
    2019-05-16

    好乱

    2019-05-16
    赞同
    回复
登录 后发表内容