微信小程序学习笔记(4)---webSocket

1.基础知识

(1)wx.connectSocket(Object object)
说明:
创建一个 WebSocket 连接。
参数:

属性	类型	默认值	必填	说明
url	string		是	开发者服务器 wss 接口地址
header	Object		否	HTTP Header，Header 中不能设置 Referer
protocols	Array/string		否	子协议数组
tcpNoDelay	boolean	false	否	建立 TCP 连接的时候的 TCP_NODELAY 设置
perMessageDeflate	boolean	false	否	是否开启压缩扩展
timeout	number		否	超时时间，单位为毫秒
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

返回值:SocketTask
(2)wx.sendSocketMessage(Object object)
说明:
通过 WebSocket 连接发送数据。需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。
参数:

属性	类型	默认值	必填	说明
data	string/ArrayBuffer		是	需要发送的内容

还有三个属性是success,fail,complete同(1)
(3)wx.closeSocket(Object object)
说明:关闭 WebSocket 连接
参数:

属性	类型	默认值	必填	说明
code	number	1000（表示正常关闭连接）	否	一个数字值表示关闭连接的状态号，表示连接被关闭的原因。
reason	string		否	一个可读的字符串，表示连接被关闭的原因。这个字符串必须是不长于 123 字节的 UTF-8 文本（不是字符）。

还有三个属性是success,fail,complete同(1)

(4)四个监听事件：

事件	说明	参数
wx.onSocketOpen(function callback)	监听 WebSocket 连接打开事件	header(object类型,连接成功的 HTTP 响应 Header)
wx.onSocketMessage(function callback)	监听 WebSocket 接受到服务器的消息事件	data(string/ArrayBuffer类型,服务器返回的消息)
wx.onSocketClose(function callback)	监听 WebSocket 连接关闭事件	code(number类型,表示连接被关闭的原因)reason（string类型,表示连接被关闭的原因)
wx.onSocketError(function callback)	监听 WebSocket 错误事件	errMsg(string类型,错误信息)

(5)SocketTask
说明:
WebSocket 任务，可通过 wx.connectSocket() 接口创建返回
方法:

方法	说明
SocketTask.send(Object object)	通过 WebSocket 连接发送数据
SocketTask.close(Object object)	关闭 WebSocket 连接
SocketTask.onOpen(function callback)	监听 WebSocket 连接打开事件
SocketTask.onClose(function callback)	监听 WebSocket 连接关闭事件
SocketTask.onError(function callback)	监听 WebSocket 错误事件
SocketTask.onMessage(function callback)	监听 WebSocket 接受到服务器的消息事件

2.demo

我们现在需要使用webSocket实现模拟彩票数据能实现实时刷新并且可以向服务端发送消息的例子

<!--index.wxml-->
<view class="container">  
       <button bindtap="send" plain>发送消息</button>  
       <input placeholder="请输入要发送的信息" value="{{value}}" bindinput="inputFunction"></input>  
       <button  bindtap="connect" plain>打开连接</button> 
       <button bindtap="close" plain>关闭连接</button>  
       <view wx:for="{{stocks}}" wx:for-index="index" wx:for-item="item">
             <text>{{item.name}}</text>                       
             <text class="{{status[index]}}">{{item.price}}</text> 
        </view>
</view>

/**index.wxss**/
.up{  
      color:red;
}
.down{  
      color:greenyellow;
 }
button{  
     margin:0;  
     padding:0;  
     width:200rpx;  
     height:80rpx; 
     margin-top:10rpx;  
     line-height:80rpx;  
     border-color:#dedede;
 }

//index.js
Page(
      {  
          data:{
              stocks:[{name:'软谋', price:100 },    
                      {name:'腾讯', price:110 },   
                      {name:'京东',price:50   } 
              ],  
              status:['','',''],   
              value:''  
          },  
          connect:function(){    
                var that=this;    
                var  stock= wx.connectSocket({      
                               url: 'ws://localhost:8080',    })                 
                stock.onMessage(function(Data){        
                      var data=JSON.parse(Data.data);       
                      var original=that.data.stocks;        
                      var status=['','',''];        
                      for(var i=0;i<original.length;++i){            
                            if(original[i].price<data[i].price){            
                                      status[i]='up';          
                            }else if(original[i].price>data[i].price){                   
                                      status[i]='down';          
                            }        
                      }       
                     that.setData({stocks:data,status:status})    
                 })  
          },  
          close:function(){    wx.closeSocket();  },  
          inputFunction:function(e){     
                  var str=e.detail.value;     
                  this.setData({value:str});  
         },  
         send:function(e){    
              var mes=this.data.value;    
              wx.sendSocketMessage({      data: mes,    }) 
         }
 })

//NodeJs--->服务器
const WebSocket=require('ws');
const wss=new WebSocket.Server({port:8080})
//模拟了三支股票
let stocks=[{
      name:'软谋',
      price:100
    },
    {
      name:'腾讯',
      price:110
    },
    {
      name:'京东',
      price:50
    }
  ];
function randomInterval(min,max){
 	return Math.floor(Math.random()*(max-min+1)+min);
}
function randomUpdate(){
	 for(var i=0;i<stocks.length;++i){
	      let randomValue=randomInterval(-50,50)/100;
	       stocks[i].price=((new Number(stocks[i].price)+randomValue).toFixed(2));
	 }
	 setTimeout(randomUpdate,2000);
}
randomUpdate();
wss.on('connection',function(ws){
	 setInterval(function(){
	        ws.send(JSON.stringify(stocks));
	 },2000);
	 ws.on('message', function (message){
	       console.log(message);
	 });
})

效果图: