SockJS和Stomp建立Websocket连接

2024-08-26 11:36

本文主要是介绍SockJS和Stomp建立Websocket连接,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

通过SockJS和Stomp建立

1. 安装

npm install sockjs-client --savenpm install stompjs --save

2. 使用

// import SockJS from "sockjs-client";  这样引入控制台报错:找不到global...
import SockJS from "sockjs-client/dist/sockjs.min.js";
import Stomp from "stompjs";
import { baseUrl } from '@/utils';
import { getCacheToken } from '@/utils';
let stompClient: Stomp.Client;const token = getCacheToken();
const ws_url = `${baseUrl}/message/ws?token=${token}`;// 初始化连接
export const initWebSocket = () => {const socket = new SockJS(ws_url, '', {timeout: 10000});stompClient = Stomp.over(socket);stompClient.connect({},() => {// 成功的回调}, () => {// 失败的回调});
};// 断开连接
export const destroyConnect = () => {stompClient && stompClient.disconnect(() => {console.log('ws连接断开!')});
}// 订阅消息
export const subscribeMessage = (topic, callback) => {if (!stompClient || !topic) retrun;const subscribeInstance = stompClient.subscribe(topic, (res) => {callback(JSON.parse(res));}, { id: topic }  //id可以不传,如果传id可以使用id取消订阅消息)return subscribeInstance; // 可以调用subscribeInstance.unsubscribe()取消订阅
}// 1. 通过ID取消订阅消息
export const unSubscribeMessage = (topic) => {if (!stompClient || !topic) retrun;stompClient.unsubscribe(topic);
}
// 2. 通过subscribeMessage返回的实例取消订阅消息
const subscribeInstance = subscribeMessage(*****)
subscribeInstance.unsubscribe()

3. 单独使用Stomp建立连接

SockJS的主要作用是提供一种WebScoket的兼容性解决方案,使得不支持WebSocket的浏览器也可以使用WebSocket。如果确定浏览器支持可以不使用。

// 使用过程和上面基本一致
// 初始化连接
export const initWebSocket = () => {stompClient = Stomp.client(ws_url)stompClient.connect({},() => {// 成功的回调}, () => {// 失败的回调});
};

4. 注意

如果是TS的项目可能会报:无法找到模块“sockjs-client/dist/sockjs.min.js”的声明文件。“c:/STMF/dev-3/smart-monitor-engine-web/node_modules/sockjs-client/dist/sockjs.min.js”隐式拥有 "any" 类型。

尝试使用 npm i --save-dev @types/sockjs-client (如果存在),或者添加一个包含 declare module 'sockjs-client/dist/sockjs.min.js'; 的新声明(.d.ts)文件ts(7016)

新建一个vite-env.d.ts 文件,在文件中加入

/// <reference types="vite/client" />declare module 'sockjs-client/dist/sockjs.min.js';

这篇关于SockJS和Stomp建立Websocket连接的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1108450

相关文章

Spring Boot 整合 MyBatis 连接数据库及常见问题

《SpringBoot整合MyBatis连接数据库及常见问题》MyBatis是一个优秀的持久层框架,支持定制化SQL、存储过程以及高级映射,下面详细介绍如何在SpringBoot项目中整合My... 目录一、基本配置1. 添加依赖2. 配置数据库连接二、项目结构三、核心组件实现(示例)1. 实体类2. Ma

电脑win32spl.dll文件丢失咋办? win32spl.dll丢失无法连接打印机修复技巧

《电脑win32spl.dll文件丢失咋办?win32spl.dll丢失无法连接打印机修复技巧》电脑突然提示win32spl.dll文件丢失,打印机死活连不上,今天就来给大家详细讲解一下这个问题的解... 不知道大家在使用电脑的时候是否遇到过关于win32spl.dll文件丢失的问题,win32spl.dl

Windows Server服务器上配置FileZilla后,FTP连接不上?

《WindowsServer服务器上配置FileZilla后,FTP连接不上?》WindowsServer服务器上配置FileZilla后,FTP连接错误和操作超时的问题,应该如何解决?首先,通过... 目录在Windohttp://www.chinasem.cnws防火墙开启的情况下,遇到的错误如下:无法与

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

IDEA连接达梦数据库的详细配置指南

《IDEA连接达梦数据库的详细配置指南》达梦数据库(DMDatabase)作为国产关系型数据库的代表,广泛应用于企业级系统开发,本文将详细介绍如何在IntelliJIDEA中配置并连接达梦数据库,助力... 目录准备工作1. 下载达梦JDBC驱动配置步骤1. 将驱动添加到IDEA2. 创建数据库连接连接参数

pycharm远程连接服务器运行pytorch的过程详解

《pycharm远程连接服务器运行pytorch的过程详解》:本文主要介绍在Linux环境下使用Anaconda管理不同版本的Python环境,并通过PyCharm远程连接服务器来运行PyTorc... 目录linux部署pytorch背景介绍Anaconda安装Linux安装pytorch虚拟环境安装cu

Nginx设置连接超时并进行测试的方法步骤

《Nginx设置连接超时并进行测试的方法步骤》在高并发场景下,如果客户端与服务器的连接长时间未响应,会占用大量的系统资源,影响其他正常请求的处理效率,为了解决这个问题,可以通过设置Nginx的连接... 目录设置连接超时目的操作步骤测试连接超时测试方法:总结:设置连接超时目的设置客户端与服务器之间的连接

SQL 中多表查询的常见连接方式详解

《SQL中多表查询的常见连接方式详解》本文介绍SQL中多表查询的常见连接方式,包括内连接(INNERJOIN)、左连接(LEFTJOIN)、右连接(RIGHTJOIN)、全外连接(FULLOUTER... 目录一、连接类型图表(ASCII 形式)二、前置代码(创建示例表)三、连接方式代码示例1. 内连接(I

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

java如何通过Kerberos认证方式连接hive

《java如何通过Kerberos认证方式连接hive》该文主要介绍了如何在数据源管理功能中适配不同数据源(如MySQL、PostgreSQL和Hive),特别是如何在SpringBoot3框架下通过... 目录Java实现Kerberos认证主要方法依赖示例续期连接hive遇到的问题分析解决方式扩展思考总