微信小程序开发实战(23):WebSocket实战
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测试
- 我的第一次ChIP-seq实践
- SparkStreaming窗口操作
- 史上最全Git使用手册
- 我所理解的 PHP Trait
- 算法 | 数据结构常见的八大排序算法
- 高通量数据下载还能这样操作?
- ofbiz实体引擎(八) 创建表
- ofbiz实体引擎(七) 检查数据源
- ofbiz实体引擎(六) GenericHelper的初始化创建
- ofbiz实体引擎(五) ModelGroupReader
- HBitcoin:C#高级比特币钱包库 - 保护您的财产安全
- ofbiz实体引擎(四) ModelReader的作用
- ofbiz实体引擎(三) GenericDelegator实例化的具体过程
- 机器学习实战 | 第五章:模型保存(持久化)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 几个好看的Seaborn图样~(虽然官方配色一般般,但我还是忍不住夸它)
- GDAL读取MAIAC的HDF文件(熟肉)
- Google Earth Engine(GEE)-谷歌地球引擎的大致Python入门
- 谷歌地球引擎(Google Earth Engine)之数据初探(栅格和矢量)
- Python-gdal离线文档下载
- 利用python把shp文件写入PostgresSQL数据库
- python调用cmd运行GDAL报错解决:ERROR 1: PROJ
- Tungsten Fabric知识库丨测试2000个vRouter节点部署
- 一行代码快速图像识别~一排代码搞定视频识别
- Python测试开发django5.urls.py参数name与<a>标签的引用
- Pytest配置文件pytest.ini
- 移植uc/OS-III最新版到小熊派开发板(STM32L431)
- phpStudy默认配置致Nginx解析漏洞复现
- HW|蓝队实战溯源反制手册分享
- 工具开发|Burp插件Unexpected_information