微信小程序-局域网通信

    在很多ktv或者家里电视上，都有一些遥控器控制、点歌和搜歌等功能。如果做手机app，那工作量大（兼容ios和android端）、使用频次低，这个时候，小程序就是非常快捷和方便的一种实现方式，对用户而言，使用成本低、占用内存小、用完即走。

     小程序也提供了websocket的方法供我们使用。

先创建ip和端口等输入界面，这里提供了连接和关闭按钮

<view class="container">
  <input class="input" placeholder="input ip" value="192.168.10.2" bindinput="onIpInput"></input>

  <input class="input" placeholder="input port" value="30609" bindinput="onPortInput"></input>
  <button class="button" style="margin-top:30rpx" bindtap="onConnectClick">连接</button>
  <button class="button" style="margin-top:30rpx" bindtap="onCloseClick">关闭</button>

  <scroll-view class="scrollview" scroll-y="true">
    <block wx:for="{{recvData}}">
      <text wx:if="{{index%2==0}}" class="text">{{item}}</text>
      <text wx:else style="color:green" class="text">{{item}}</text>
    </block>
  </scroll-view>
</view>

js部分，简单的连接和接收服务端指令，接收数据可能有转义字符\，加正则表达式去除。

//获取应用实例
const app = getApp()
var mIp = '192.168.10.2'
var mPort = '30609'
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    recvData:[],
  },
 
  onLoad: function () {
    
  },

  onHide:function(){
    wx.closeSocket({
      
    })
  },

  onIpInput:function(e){
    console.log("ip="+e.detail.value)
    mIp = e.detail.value
  },

  onPortInput: function (e) {
    console.log("port=" + e.detail.value)
    mPort = e.detail.value
  },

  onConnectClick:function(){
    if(mIp && mPort){
      this.connectServer()
    }else{
      console.log("error")
    }
  },

／**
*连接服务端
*／
  connectServer:function(){
    var that = this
    wx.connectSocket({
      url: 'ws://'+mIp+':'+mPort+'/',
      fail:(res)=>{
        console.log(JSON.stringify(res))
      }
    })
    wx.onSocketOpen(function(res){
      console.log("onSocketOpen=="+res)
      console.log("onSocketOpen="+JSON.stringify(res))
    })
    wx.onSocketMessage(function(res){
      var data = JSON.stringify(res).replace(new RegExp('\\\\\"', "gm"), '"');
      console.log(data)
      that.data.recvData.push(data)
      that.setData({
        recvData: that.data.recvData
      })
    })
    
  },

  onCloseClick:function(){
    console.log('onCloseClick')
    wx.closeSocket({
      
    })
  }
})
 

 wx.onSocketMessage负责接收数据，数据格式为json， {data:xx}形式。