微信小程序 websocket 的使用

在这里插入图片描述
服务端源码
客户端源码如下
js

Page({

  data:{
    list: [],
    title: ''
  },

  onShow: function (options) {
    var _this = this;

    /**
     * 启动WebSocket
     */
    wx.connectSocket({
      url: 'ws://192.168.168.82:8888/websocket'
    })

    /**
     * 监听连接成功事件
     */
    wx.onSocketOpen(function (res) {

      _this.data.list.push("WebSocket连接成功");
      _this.setData({ list: _this.data.list })

    })

    /**
     * 监听发送事件
     */
    wx.onSocketMessage(function (res) {

      _this.data.list.push(res.data);
      _this.setData({ list: _this.data.list })
      
    })

    /**
     * 监听连接关闭事件
     */
    wx.onSocketClose(function (res) {

      _this.data.list.push("WebSocket连接关闭");
      _this.setData({ list: _this.data.list })

    })
  },

  /**
   * 绑定参数
   */
  inputTitle: function(e){
    var _this = this;
    _this.setData({ title: e.detail.value })
  },

  /**
   * 发送信息
   */
  send: function(){
    var _this = this;
    wx.sendSocketMessage({ data: _this.data.title })
  },

  /**
   * 关闭连接
   */
  closeWebSocket: function(){
    wx.closeSocket({})
  }
})

wxml

<textarea style="border: 1px solid black;" bindinput='inputTitle'></textarea>
<button style="border: 1px solid violet;" bindtap='send'>发送消息</button>
<button style="border: 1px solid red;" bindtap='closeWebSocket'>关闭WebSocket连接</button>
<view wx:for="{{list}}">{{item}}</view>
展开阅读全文

没有更多推荐了,返回首页