vue使用SockJS实现webSocket通信

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

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(){
   
  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3是一个流行的JavaScript框架,用于构建用户界面。SockJS是一个用于在Web浏览器和服务器之间建立实时通信的库。在Vue3中使用SockJS需要安装两个模块:sockjs-client和stompjs。SockJS提供了服务端和客户端的库,分别是sockjs-node和sockjs-client。在VueCLI3项目中,如果没有使用SockJS,运行"npm run serve"命令后,可能会出现网络请求一直调用一个接口的情况,该接口是"http://localhost:8080/sockjs-node/info?t=1462183700002"。为了实现WebSocket通信,需要后台的配合,同时使用sockjs-client和stompjs这两个模块。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue-cli3 一直运行 /sockjs-node/info?t= 解决方案](https://blog.csdn.net/qq_29207823/article/details/110199195)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatgptT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [在vuewebSocket通信](https://blog.csdn.net/qinchaidaren/article/details/90106542)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatgptT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值