成都企业模板建站,wordpress 水煮鱼小程序,软件开发公司的组织架构,珠海工商网上登记平台websocket#xff1a; WebSocket是HTML5下一种新的协议#xff08;websocket协议本质上是一个基于tcp的协议#xff09;它实现了浏览器与服务器全双工通信#xff0c;能更好的节省服务器资源和带宽并达到实时通讯的目的Websocket是一个持久化的协议 websocket提供的api WebSocket是HTML5下一种新的协议websocket协议本质上是一个基于tcp的协议它实现了浏览器与服务器全双工通信能更好的节省服务器资源和带宽并达到实时通讯的目的Websocket是一个持久化的协议 websocket提供的api // 连接成功后的回调函数 ws.onopen function (params) {console.log(客户端连接成功)// 向服务器发送消息ws.send(hello) };// 从服务器接受到信息时的回调函数 ws.onmessage function (e) {console.log(收到服务器响应, e.data) };// 连接关闭后的回调函数 ws.onclose function(evt) {console.log(关闭客户端连接); };// 连接失败后的回调函数 ws.onerror function (evt) {console.log(连接失败了); };// 监听窗口关闭事件当窗口关闭时主动去关闭websocket连接防止连接还没断开就关闭窗口这样服务端会抛异常。 window.onbeforeunload function() {ws.close(); } 一、首先写一个websocket的工具方便直接调用websocket方法 /*** websocket创建*/export function websocket() {return new Promise((res, req) {if (WebSocket in window) {const ws new WebSocket(${wss:// document.location.host/ws/notify_warning/}) //这里用的document.location.host取url地址在调试时也可以先写死wss还是ws需要和后端同事确认res(ws)} else {req(您的浏览器不支持 WebSocket!)}}) } 二、写一个状态机来管理数据将后端传来的数据存到state.message import { websocket } from /utils/websocket import store from ./../index import { getToken } from /utils/auth // get token from cookieconst state {message: {},ws: null }const mutations {SET_MESSAGE: (state, message) {state.message message},SET_WS: (state, ws) {state.ws ws} }const actions {websocketMsg({ commit }) {return new Promise((resolve, reject) {websocket().then((ws) {commit(SET_WS, ws)ws.onopen function() {// Web Socket 已连接上使用 send() 方法发送数据ws.send(发送数据)}ws.onmessage function(evt) {var received_msg evt.datacommit(SET_MESSAGE, received_msg)}ws.onerror function(error) {reject(error)}ws.onclose function() {// 关闭 websocket// alert(连接已关闭...);if (getToken()) {store.dispatch(message/websocketMsg)}}resolve()})})} }export default {namespaced: true,state,mutations,actions } 三、在合适的地方去调用 try {await store.dispatch(message/websocketMsg);} catch (err) {}