Vue中使用SockJS实现webSocket通信

SockJS 简介

SockJS 是一个浏览器 JavaScript 库，它提供了一个类似于网络的对象。SockJS 提供了一个连贯的、跨浏览器的 Javascript API，它在浏览器和 web 服务器之间创建了一个低延迟、全双工、跨域通信通道。

• SockJS 会优先采用 websocket，如果在不支持 websocket 的浏览器中，会自动降为轮询的方式；
• 兼容跨浏览器，支持跨域；

SockJS 在 vue 中的使用

锁屏情况下，js 会停止工作，这时，ws 会自动关闭，当屏幕唤醒时，通过触发 onclose 事件，ws
又会进行重连。在某些特殊业务场景下，需要注意下这种情况。

安装 sockjs-client 和 stompjs

npm install sockjs-client
npm install stompjs

页面中引入 SockJS 和 Stomp

import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';

实现思路

export default {
        data() {
            return {
                stompClient:
                '',
                timer: '',
                socket: null,
                userId: '',
            }
        },
        mounted() {
            this.init();
        },
        beforeDestroy: function() {
            // 页面离开时断开连接,清除定时器
            this.disconnect() clearInterval(this.timer)
        },
        methods: {
            init() {
                this.connection() let _this = this
                // 断开重连机制
                this.timer = setInterval(() = >{
                    try {
                        _this.stompClient.send('test')
                    } catch(e) {
                        console.log('连接中断:' + e) _this.connection()
                    }
                },
                10000)
            },
            connection() {
                this.socket = new SockJS(config.webSocketUrl + '/web-socket/ws') //协议字段
                this.stompClient = Stomp.over(this.socket) let __this = this

                // 向服务器发起 websocket 连接
                let token = userUtils.getToken() this.stompClient.connect({
                    userId: this.userId,
                    // 携带客户端信息
                    token: token
                },
                function connectCallback() {
                    __this.stompClient.subscribe('/user/exchange/stompUser/stompUserNotice', //订阅地址
                    (response) = >{
                        console.log('连接成功', response) //接收 response 数据
                    })
                },
                function errorCallBack(error) {
                    console.log('连接失败:' + error)
                })
            },
            disconnect() {
                clearInterval(this.timer) if (this.stompClient) {
                    this.stompClient.disconnect()
                }
            },
        }
    }

即时通信

心跳检测

ws 建立成功时便进行心跳请求（每隔一段时间发送一个 PING），同时初始化 超时重连。如果在达到心跳规定次数后仍没有返回 PONG，则判定心跳超时，前端主动关闭 ws，触发 ws 重连。

【注意】：ws 重连的时候，要清空之前的心跳定时器。

什么时候关闭心跳连接

• 心跳超时（连接层不断）的情况，则前端可主动关闭 ws；
• 连接未建立成功（如 TCP 连接断掉），ws 自动关闭；
• 服务端关闭（如多端剔除），这是要防止前端进行重连。

websocket 相关文章推荐：

• vue 实现简单的 WebSocket 聊天功能
• vue 项目中 websocket 封装方法的使用
• 微信小程序版 webSocket 组件的封装

原文链接：点击这里