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);
});
})效果图:
