WebSocket是一种在单个TCP 连接上进行全双工通讯的协议。 在WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以建立持久性的连接，并进行双向数据传输。
HTML5支持WebSocket，使用方法和小程序的WebSocket基本是一样的。WebSocket API由若干个方法和若干个事件组成。这些方法和事件如下：
方法
-
wx.connectSocket：与服务端建立连接
-
wx.sendSocketMessage：向服务端发送数据
-
wx.closeSocket：关闭连接
事件
-
wx.onSocketOpen：成功与服务端建立连接后触发的事件
-
wx.onSocketError：与服务端建立连接失败后触发的事件
-
wx.onSocketMessage：服务端返回响应消息后触发的事件
-
wx.onSocketClose：成功关闭WebSocket连接后触发的事件
其中wx.connectSocket和wx.sendSocketMessage方法都有一个Object类型的参数，参数属性含义如下所示。
wx.connectSocket方法参数描述
-
url：String类型，必选，开发者服务器接口地址，必须是 wss 协议，且域名必须是后台配置的合法域名
-
data：Object类型，可选，请求的数据
-
header：Object类型，可选，HTTPS Header , header 中不能设置 Referer
-
method： String类型，可选，默认是GET，有效值为： OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
-
success：Function类型，可选，接口调用成功的回调函数
-
fail：Function 类型，可选，接口调用失败的回调函数
-
complete：Function类型，可选， 接口调用结束的回调函数（调用成功、失败都会执行）
wx. sendSocketMessage方法参数描述
-
data：String或ArrayBuffer类型，必选，需要发送的内容
-
success：Function类型，可选，接口调用成功的回调函数
-
fail：Function 类型，可选，接口调用失败的回调函数
-
complete：Function类型，可选， 接口调用结束的回调函数（调用成功、失败都会执行）
下面的代码是从建立WebSocket连接，到向服务端发送数据，然后接收到响应数据，最后关闭WebSocket连接的完整演示。
-
var socketOpen =
false
-
var socketMsgQueue = []
-
wx.connectSocket({
-
url:
'wss://example.com/test.php',
// 该Url并不存在，只是为了演示假设了一个url
-
data:{
-
x:
'',
-
y:
''
-
},
-
header:{
-
'content-type':
'application/json'
-
},
-
method:
"GET"
-
})
-
// 成功建立WebSocket连接后，会调用该函数
-
wx.onSocketOpen(
function(res) {
-
socketOpen =
true
-
for (
var i =
0; i < socketMsgQueue.length; i++){
-
sendSocketMessage(socketMsgQueue[i])
-
}
-
socketMsgQueue = []
-
})
-
// 向服务端发送数据，如果成功建立了连接，则直接发送，否则保存到消息队列（socketMsgQueue）中
-
function sendSocketMessage(msg) {
-
if (socketOpen) {
-
wx.sendSocketMessage({
-
data:msg
-
})
-
}
else {
-
socketMsgQueue.push(msg)
-
}
-
}
-
// 接收服务端的响应消息，然后关闭WebSocket连接
-
wx.onSocketMessage(
function(res) {
-
console.log(
'收到服务器内容：' + res.data)
-
wx.closeSocket()
-
})
-
// 成功关闭WebSocket连接后，会调用该函数
-
wx.onSocketClose(
function(res) {
-
console.log(
'WebSocket 已关闭！')
-
})
如果读者没有用于测试WebSocket的Url，可以使用HTML5来测试WebSocket，效果是一样的。例如，下面是一段用来测试WebSocket的完整的代码，使用的是ws://echo.websocket.org，一个专门用来测试WebSocket的echo服务。在小程序中，必须使用wss，而在HTML5中并没这个要求，使用wss和ws都可以，而且域名也不需要备案。
-
<html>
-
<head>
-
<title>测试WebSocket
</title>
-
<script>
-
function init() {
-
websocket =
new WebSocket(
"ws://echo.websocket.org/");
-
-
websocket.onopen =
function() {
document.getElementById(
"output").innerHTML +=
"<p>> CONNECTED</p>"; };
-
-
websocket.onmessage =
function(evt)
-
{
document.getElementById(
"output").innerHTML +=
"<p style='color: blue;'>> RESPONSE: " + evt.data +
"</p>"; };
-
-
websocket.onerror =
function(evt)
-
{
document.getElementById(
"output").innerHTML +=
"<p style='color: red;'>> ERROR: " + evt.data +
"</p>"; };
-
}
-
-
function sendMessage(message) {
-
document.getElementById(
"output").innerHTML +=
"<p>> SENT: " + message +
"</p>";
-
-
websocket.send(message);
-
}
-
-
window.addEventListener(
"load", init,
false);
-
</script>
-
</head>
-
<body>
-
<input onkeypress="if(this.value) {if (window.event.keyCode == 13) { sendMessage(this.value); this.value = null; }}"/>
-
<div id="output">
</div>
-
</body>
-
</html>
我们可以看到，HTML5的WebSocket和小程序的WebSocket的API在使用上基本是一样的。例如，小程序使用wx.connectSocket方法连接服务端，而HTML5直接创建了WebSocket对象。小程序使用wx.sendSocketMessage方法向服务端发送数据，而HTML5使用websocket.send方法向服务端发送数据。
在浏览器中运行这段代码后，会自动连接服务端，然后在页面左上角输入Hello，按回车键，在页面会显示发送和返回的响应信息。如图1所示。
图1 HTML5 WebSocket测试
转载：https://blog.csdn.net/nokiaguy/article/details/108212194