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

相关文章

MySQL中的交叉连接、自然连接和内连接查询详解

《MySQL中的交叉连接、自然连接和内连接查询详解》:本文主要介绍MySQL中的交叉连接、自然连接和内连接查询,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、引入二、交php叉连接(cross join)三、自然连接(naturalandroid join)四

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面:本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.

关于WebSocket协议状态码解析

《关于WebSocket协议状态码解析》:本文主要介绍关于WebSocket协议状态码的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录WebSocket协议状态码解析1. 引言2. WebSocket协议状态码概述3. WebSocket协议状态码详解3

Ubuntu中远程连接Mysql数据库的详细图文教程

《Ubuntu中远程连接Mysql数据库的详细图文教程》Ubuntu是一个以桌面应用为主的Linux发行版操作系统,这篇文章主要为大家详细介绍了Ubuntu中远程连接Mysql数据库的详细图文教程,有... 目录1、版本2、检查有没有mysql2.1 查询是否安装了Mysql包2.2 查看Mysql版本2.

Python3.6连接MySQL的详细步骤

《Python3.6连接MySQL的详细步骤》在现代Web开发和数据处理中,Python与数据库的交互是必不可少的一部分,MySQL作为最流行的开源关系型数据库管理系统之一,与Python的结合可以实... 目录环境准备安装python 3.6安装mysql安装pymysql库连接到MySQL建立连接执行S

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. 创建数据库连接连接参数