跟京东类似的网站,wordpress给分页加链接,湖南郴州最好的县城,成都推广系统websocket前端 和服务端websocket通信示例#xff0c; 前端直接使用h5的内置对象 WebSocket 来创建和管理 WebSocket 连接#xff0c;以及可以通过该连接发送和接收数据。
这个对象都是是事件方式来处理和与后端交互数据#xff0c; 他们分别是 onopen打开, onclose关闭, o…websocket前端 和服务端websocket通信示例 前端直接使用h5的内置对象 WebSocket 来创建和管理 WebSocket 连接以及可以通过该连接发送和接收数据。
这个对象都是是事件方式来处理和与后端交互数据 他们分别是 onopen打开, onclose关闭, onerror 异常 和 onmessage 收到消息这4个事件来处理。 其中我们的主要业务逻辑和数据的接收都是在onmessage里面完成的。
websocket.js文件 // 根据不同的http环境构建对应的协议 ws 或者 wss
const getWsUri () {var loc window.location,ws_prot ws:;if (loc.protocol https:) {ws_prot wss:;}return ws_prot // loc.host loc.pathname ws
}var timeout 250;const clamp (val, min, max) {if (val min) return min;if (val max) return max;return val;
}/* WebSocket 链接处理 */
const connect () {const uri getWsUri();// 创建一个和服务端的WS链接对象let ws new WebSocket(uri);console.info(Attempting websocket connection to server at ${uri});// 链接打开时的处理方法ws.onopen () {console.info(Successfully connected);timeout 250; // reset connection timeout for next time};// 链接关闭时的处理方法ws.onclose event {console.error(Closed websocket connection: code ${event.code});setTimeout(connect, clamp(timeout timeout, 250, 5000));};ws.onerror err {console.error(Websocket error, closing connection.);ws.close();};// onmessage这个是当ws收到数据时调用的方法ws.onmessage event {// 接收并返序列化JSON数据let data JSON.parse(event.data)// 你的业务逻辑}
}
// 执行ws函数
connect();
其实前端的这websocket挺简单的 只要你搞明白了上面的4个事件就OK, 更多的使用细节可参考MSDN官方文档 https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket Websocket后端部分可参考 https://blog.csdn.net/tekin_cn/article/details/139534427
