本文介绍了微信小程序WebSocket协议说明和使用示例，通过实例帮助我们快速熟悉和使用它。
什么是WebSocket（简要说明）
微信的WebSocket接口与HTML5的WebSocket基本相同。 它是HTTP协议的升级。 作为一种新的Socket，用在B/S上。 它实现了浏览器和服务器之间的全双工通信。
因为这是一个小程序，所以我不会过多解释WebSocket的底层和协议，只是简单介绍一下。 想了解更多关于WebSocket的知识，请参考以下内容：
WebSocket协议
WebSocket 和 Ajax 之间的选择
在WebSocket出现之前，通常使用Ajax来实现即时通讯，Ajax通过轮询的方式获取实时数据。 轮询是在指定的时间间隔内发出HTTP请求来获取数据，而这种方法会有一些缺点。 一方面，产生过多的HTTP请求，占用带宽，增加服务器的响应微信小程序web源码微信小程序web源码，浪费资源。 另一方面，因为并不是每个请求都会有数据变化（就像聊天室一样），所以会导致请求的利用率较低。
WebSocket可以解决以上缺点。 WebSocket 在客户端和服务器之间建立通道。 该请求只需请求一次，就可以从同一个通道实时获取服务器的数据。 因此，当应用于实时应用时，WebSocket 是一个非常好的选择。
WebSocket 协议名称
WebSocket链接不是以http或https开头，而是以ws和wss开头。 这里你需要注意。
示例：交易信息实时显示
这类似于实时查看股票信息。 这里用到了图表插件wxchart。
wxchart插件地址：
基本上就这些了，让我们正式开始吧。
添加库存页面：
将wxchart.js放入pages/stock/中。
修改stock.wxml：
stock.js 代码：
// pages/stock/stock.js
//加载插件
var wxCharts = require('wxcharts.js');
Page({
data: {},
onLoad: function (options) {
//建立连接
wx.connectSocket({
url: "ws://localhost:12345",
})
//连接成功
wx.onSocketOpen(function() {
wx.sendSocketMessage({
data: 'stock',
})
})
//接收数据
wx.onSocketMessage(function(data) {
var objData = JSON.parse(data.data);
console.log(data);
new wxCharts({
canvasId: 'lineCanvas',//指定canvas的id
animation: false,
type: 'line',//类型是线形图
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: '交易量',
data: objData,//websocket接收到的数据
format: function (val) {
if (typeof val == "string") {
val = parseFloat(val);
}
return val.toFixed(2) + '万元';
}
},
],
yAxis: {
title: '交易金额 (万元)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: 320,
height: 200
});
})
//连接失败
wx.onSocketError(function() {
console.log('websocket连接失败！');
})
},
})
登录后复制
这里WebSocket的地址是ws://localhost，端口是12345，连接成功后，将股票发送到服务器，然后服务器向小程序提供数据信息。
我用 PHP 编写了 WebSocket 的服务器端。 我将其发布在这里供您参考：
sockets;
$write = NULL;
$except = NULL;
socket_select($socketArr, $write, $except, NULL);
foreach ($socketArr as $socket){
if ($socket == $this->master){
$client = socket_accept($this->master);
if ($client log("socket_accept() failed");
continue;
}else{
$this->connect($client);
}
}
else{
$this->log("----------New Frame Start-------");
$bytes = @socket_recv($socket,$buffer,2048,0);
if ($bytes == 0){
$this->disconnect($socket);
}else{
$user = $this->getUserBySocket($socket);
if (!$user->handshake){
$this->doHandShake($user, $buffer);
}else{
$buffer = $this->unwrap($user->socket, $buffer);
//请求为stock时，向通道内推送数据
if ($buffer == 'stock') {
$arr = array();
//模拟数据
for ($i=0; $i send($user->socket, json_encode($arr));
}
}
}
}
}
}
}
}
$s = new WebSocket2('localhost', 12345);
$s -> run();
登录后复制
用PHP写WebSocket有点麻烦。 如果你了解 Node.js，你可以用 Node.js 来编写它。 Node.js很方便编写后端WebSocket。
效果示例：
微信WebSocketAPI参数说明
wx.connectSocket(OBJECT)
[tr] 参数类型必需的描述[/tr]
网址
细绳
是的
开发者服务器接口地址必须是wss协议，域名必须是后台配置的合法域名。
数据
目的
不
请求的数据
标头
目的
不
HTTP Header、Referer 不能在 header 中设置
方法
细绳
不
默认为 GET，有效值为：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT
成功
功能
不
接口调用成功的回调函数
失败
功能
不
接口调用失败回调函数
完全的
功能
不
接口调用结束时的回调函数（无论调用成功还是失败都会执行）
wx.onSocketOpen(回调)
监听WebSocket连接打开事件。
wx.onSocketError(回调)
监听 WebSocket 错误。
wx.sendSocketMessage(OBJECT)
通过WebSocket连接发送数据，需要先wx.connectSocket，然后在wx.onSocketOpen回调后发送。
[tr] 参数类型必需的描述[/tr]
数据
字符串/数组缓冲区
是的
需要寄什么东西
成功
功能
不
接口调用成功的回调函数
失败
功能
不
接口调用失败回调函数
完全的
功能
不
接口调用结束时的回调函数（无论调用成功还是失败都会执行）
wx.onSocketMessage(回调)
侦听 WebSocket 从服务器接收的消息事件。
[tr] 参数类型说明[/tr]
数据
字符串/数组缓冲区
服务器返回的消息
wx.closeSocket()
关闭 WebSocket 连接。
wx.onSocketClose(回调)
监听 WebSocket 关闭。
关于本地主机
这是本地主机的描述。 上面的代码中，我使用了localhost的本地请求。 这只是一个占位符。 编程中不支持本地主机本地请求。 大家应该注意这一点。