»
063. WebSocket
H5实现的WebSocket长连接:
// webSocket全局变量
var socket = null;
var keepAliveIntervalId=null;
// 开启webSocket
openWebSocket();
function openWebSocket(){
// 创建一个WebSocket实例(只能使用new WebSocket+websocket地址的方式)
socket = new WebSocket('ws://your-websocket-server');
// 当WebSocket连接打开时触发
socket.onopen = function(event) {
console.log('WebSocket 连接已打开');
sendMessage("{\"msgType\":"tryConnect",\"token\":\"从web接口中获取到的用于关联websocket和用户session的token\"}");
};
// 当WebSocket接收到服务器发送的消息时触发
socket.onmessage = function(event) {
console.log('收到消息:', event.data);
};
// 当WebSocket连接关闭时触发,触发后等待5秒钟重新打开socket
socket.onclose = function(event) {
setTimeout(()=>{
openWebSocket();
},5000);
console.log('WebSocket 连接已关闭');
};
// 当WebSocket通信发生错误时触发,触发后先关闭socket链接,再等待5秒钟重新打开socket
socket.onerror = function(error) {
socket.close();
setTimeout(()=>{
openWebSocket();
},5000);
console.error('WebSocket 出现错误:', error);
};
// 创建完成socket,设置定时器、每两秒钟调用keepALive一次,以保持session
if(keepAliveIntervalId){
clearInterval(keepAliveIntervalId);
}
keepAliveIntervalId=setInterval(()=>{
sendMessage("{\"msgType\":\"keepALiveMessage\"}");
},2000);
}
// 发送消息到WebSocket服务器
function sendMessage(message) {
if(socket&&socket.readyState === WebSocket.OPEN){
socket.send(message);
}
}
openWebSocket()函数中,代码的命令执行次序不用担心,因为,浏览器JS是单线程的。
————www.v-signon.com学习者共勉