vue使用SockJS实现webSocket通信

最新推荐文章于 2024-09-06 09:03:34 发布

小稀饭_

最新推荐文章于 2024-09-06 09:03:34 发布

阅读量2.6k

点赞数 4

分类专栏： VUE 文章标签： vue socket websocket

本文链接：https://blog.youkuaiyun.com/m0_51566444/article/details/119357615

版权

本文介绍了如何在Vue项目中利用SockJS和Stompjs进行WebSocket通信。详细阐述了SockJS的功能特性，包括其在不同浏览器的兼容性和跨域支持。在Vue应用中，当屏幕锁定导致ws关闭时，可以通过onclose事件实现自动重连。文章还讨论了心跳检测的重要性，以及在何时关闭心跳连接的判断策略，如心跳超时或连接异常时。最后，提供了实践中的关键点作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(){

最低0.47元/天解锁文章