一、WebSocket 概述
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 可以在浏览器和服务器之间建立实时的双向通信,相比传统的 HTTP,有更低的延迟和更高的效率。
WebSocket 在建立连接时,需要进行握手协议,握手过程的 header 信息显示 WebSocket 支持的协议。客户端请求建立 WebSocket 连接时,请求头部包含了 Upgrade 和 Connection,服务器端返回的头部信息中也包含了 Upgrade 和 Connection。
客户端和服务器端使用一致的 WebSocket 生命周期管理,通信效率高,性能优越,操作简单。
二、WebSocket 在小程序中的应用
在小程序开发中,可以利用微信开发者工具提供的模拟 websocket 功能完成初步的开发,同时在实际项目中需要使用到后端接口的支持,可以使用 Springboot 及 WebSocket 包括STOMP的技术。
使用微信小程序中的 WebSocket,在前端中通过JS提供的 WebSocket 接口来建立 WebSocket 连接,并通过 WebSocket 接口提供的方法向服务器发送消息或者接收服务器下发的消息。使用 WebSocket 接口发送消息时,调用 send() 方法,使用 onmessage() 方法接收消息。
三、示例代码
前端代码
var socketOpen = false var socketMsgQueue = [] const URL = 'wss://xxx.xxx.xxx.xxx:xxxx' //WebSocket 地址 wx.connectSocket({ url: URL, success: function () { console.log('WebSocket连接成功') }, fail: function () { console.log('WebSocket连接失败') } }) wx.onSocketOpen(function (res) { console.log('WebSocket连接已打开!') socketOpen = true for (var i = 0; i < socketMsgQueue.length; i++) { sendSocketMessage(socketMsgQueue[i]) } socketMsgQueue = [] }) wx.onSocketMessage(function (res) { console.log('收到服务器内容:' + res.data) }) wx.onSocketClose(function (res) { console.log('WebSocket 已关闭!') socketOpen = false }) function sendSocketMessage(msg) { if (socketOpen) { wx.sendSocketMessage({ data: msg }) } else { socketMsgQueue.push(msg) } }
后端WebSocket配置
@Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Autowired private WebSocketInterceptor webSocketInterceptor; @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker("/topic"); registry.setApplicationDestinationPrefixes("/app"); } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/ws") .setAllowedOrigins("*") .addInterceptors(webSocketInterceptor) .withSockJS(); } }
四、小结
本文就微信小程序 WebSocket 进行了详细的讲解,并提供了相关的示例代码。WebSocket 大大提升了前后端通信效率和性能,对于实时性要求较高的页面和应用,可以使用 WebSocket 协议。