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 组件的封装

原文链接：点击这里

以上关于Vue中使用SockJS实现webSocket通信的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。