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重连。

Vue中使用SockJS实现webSocket通信

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

什么时候关闭心跳连接

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

websocket相关文章推荐:

原文链接:点击这里

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue中使用SockJS实现webSocket通信

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们