前端实现websocket通信讲解(vue2框架)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
websocket:
- 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 cookie
const 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.data
commit('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) {}
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献13条内容
所有评论(0)