前端实现websocket通信讲解（vue2框架）

前言：最近接到的需求是前端需要实现一个全局告警弹窗，如果使用ajax请求http接口只能用定时器定时去请求是否有告警，这样既消耗资源，又不能实时监测到告警信息。所以这个时候就可以采用websocket来实现通信，因为websocket不用请求一次才响应一次，它可以实现服务器主动发送。

websocket：

• WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）
• 它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的
• Websocket是一个持久化的协议

websocket提供的api：

1. // 连接成功后的回调函数
2. ws.onopen = function (params) {
3. console.log('客户端连接成功')
4. // 向服务器发送消息
5. ws.send('hello')
6. };
8. // 从服务器接受到信息时的回调函数
9. ws.onmessage = function (e) {
10. console.log('收到服务器响应', e.data)
11. };
13. // 连接关闭后的回调函数
14. ws.onclose = function(evt) {
15. console.log("关闭客户端连接");
16. };
18. // 连接失败后的回调函数
19. ws.onerror = function (evt) {
20. console.log("连接失败了");
21. };
24. // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，这样服务端会抛异常。
25. window.onbeforeunload = function() {
26. ws.close();
27. }

接下来陈列一个vue2项目内使用websocket的过程：

一、首先写一个websocket的工具，方便直接调用websocket方法

目录 

websocket.js代码：

1. /**
2. * websocket创建
3. */
5. export function websocket() {
6. return new Promise((res, req) => {
7. if ('WebSocket' in window) {
8. const ws = new WebSocket(`${'wss://'+ document.location.host+'/ws/notify_warning/'}`)
9. //这里用的document.location.host取url地址，在调试时也可以先写死，wss还是ws需要和后端同事确认
10. res(ws)
11. } else {
12. req('您的浏览器不支持 WebSocket!')
13. }
14. })
15. }

 二、写一个状态机来管理数据，将后端传来的数据存到state.message

1. import { websocket } from '@/utils/websocket'
2. import store from './../index'
3. import { getToken } from '@/utils/auth' // get token from cookie
5. const state = {
6. message: {},
7. ws: null
8. }
10. const mutations = {
11. SET_MESSAGE: (state, message) => {
12. state.message = message
13. },
14. SET_WS: (state, ws) => {
15. state.ws = ws
16. }
17. }
19. const actions = {
20. websocketMsg({ commit }) {
21. return new Promise((resolve, reject) => {
22. websocket().then((ws) => {
23. commit('SET_WS', ws)
24. ws.onopen = function() {
25. // Web Socket 已连接上，使用 send() 方法发送数据
26. ws.send('发送数据')
27. }
29. ws.onmessage = function(evt) {
30. var received_msg = evt.data
31. commit('SET_MESSAGE', received_msg)
32. }
33. ws.onerror = function(error) {
34. reject(error)
35. }
36. ws.onclose = function() {
37. // 关闭 websocket
38. // alert("连接已关闭...");
39. if (getToken()) {
40. store.dispatch('message/websocketMsg')
41. }
42. }
43. resolve()
44. })
45. })
46. }
47. }
49. export default {
50. namespaced: true,
51. state,
52. mutations,
53. actions
54. }

三、在合适的地方去调用：

1. try {
2. await store.dispatch("message/websocketMsg");
3. }
4. catch (err) {}

这样websocket传过来的值就存在了message中，可以将其渲染在页面中