• 前端实现websocket通信讲解(vue2框架)


    websocket:

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

    websocket提供的api:

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

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

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

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

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

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

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

  • 相关阅读:
    互联网产品知识梳理
    Java中数据结构(基本数据类型+引用数据类型)介绍+整理+例子+对比
    【开源】渔具租赁系统 JAVA+Vue.js+SpringBoot+MySQL
    Opencv 基本操作四 指针数组、vector与Mat之间的相互转换
    阿里云企业邮箱基于Spring Boot快速实现发送邮件功能
    fwknop服务端调试
    《vue3实战》运用push()方法实现电影评价系统的添加功能
    Flask 学习100-Flask-SocketIO 结合 xterm.js 实现网页版Xshell
    【算法训练-贪心算法 一】买卖股票的最佳时机II
    卡码网语言基础课 |出现频率最高的字母
  • 原文地址:https://blog.csdn.net/m0_70547044/article/details/136743806