基于SpringBoot + Vue的项目整合WebSocket的入门教程

1、WebSocket简介

  WebSocket是一种网络通信协议，可以在单个TCP连接上进行全双工通信。它于2011年被IETF定为标准RFC 6455，并由RFC7936进行补充规范。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。这使得客户端和服务器之间的数据交换变得更加简单，并允许服务端主动向客户端推送数据。

2、服务端环境搭建

  服务端基于SpringBoot实现，首先引入对应的jar包，然后进行ServerEndpointExporter配置，然后再定义了一个WebSocket操作类，最后编写了一个测试的类WebSocketController（一个普通的Controller类）。

2.1、maven依赖
<!-- websocket 依赖 -->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2.2、配置类WebSocketConfig

  ServerEndpointExporter是Spring框架中的一个类，主要用于在Spring Boot应用中启动和管理WebSocket服务器端点。

  在Spring Boot内置容器（嵌入式容器）中运行时，必须由ServerEndpointExporter提供ServerEndpointExporter bean，它会在启动时自动扫描和注册应用中的WebSocket端点。

  注意：在Tomcat等其他容器中运行时，容器的扫描工作会由容器自己处理，不需要手动注入ServerEndpointExporter bean，即不需要该配置！！！

@Configuration
public class WebSocketConfig {/*** 	注入ServerEndpointExporter，* 	这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint*/@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}
2.3、WebSocket操作类

  WebSocket操作类定义了WebSocket中的onOpen()、onMessage()、onClose()、onError()等方法，同时提供了一个发送广播（全部订阅用户）和点对点信息的方法。

1、这里@ServerEndpoint(“/api/websocket/{userId}”)中的定义可以根据自己的需要进行修改，因为我的项目里使用了SpringSecurity了，为了避免登录鉴权，这里使用“/api/**”配置了免登陆Api。后续会继续完善需要登录鉴权的使用方式。
2、这里的WebSocket操作类，每次建立 WebSocket 连接时，就会初始化一个新的 bean。这是由于 WebSocket 是一种双向的、长时间的通信机制，它需要维护每个连接的状态，处理每个从客户端发来的消息，并根据这些消息生成响应消息发送回客户端。因此，为每个 WebSocket 连接创建一个单独的 bean 是必要的，这样可以让 Spring Boot 为每个连接提供必要的管理和生命周期控制。这种方式也可以使用单例模式实现，后续再更新相关用法。

@Component
@Slf4j
@ServerEndpoint("/api/websocket/{userId}")
public class WebSocket {//与某个客户端的连接会话，需要通过它来给客户端发送数据private Session session;//用户IDprivate String userId;//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。//虽然@Component默认是单例模式的，但springboot还是会为每个websocket连接初始化一个bean，所以可以用一个静态set保存起来。private static CopyOnWriteArraySet<WebSocket> webSockets =new CopyOnWriteArraySet<>();// 用来存在线连接用户信息private static ConcurrentHashMap<String,Session> sessionPool = new ConcurrentHashMap<String,Session>();/*** 链接成功调用的方法*/@OnOpenpublic void onOpen(Session session, @PathParam(value="userId")String userId) {try {this.session = session;this.userId = userId;webSockets.add(this);sessionPool.put(userId, session);log.info("WebSocket消息有新的连接，总数为:"+webSockets.size());} catch (Exception e) {log.error("WebSocket异常-链接失败(onOpen)，原因：" + e.getMessage());}}/*** 链接关闭调用的方法*/@OnClosepublic void onClose() {try {webSockets.remove(this);sessionPool.remove(this.userId);log.info("WebSocket消息连接断开，总数为:"+webSockets.size());} catch (Exception e) {log.error("WebSocket异常-链接关闭失败(onClose)，原因：" + e.getMessage());}}/*** 收到客户端消息后调用的方法** @param message*/@OnMessagepublic void onMessage(String message) {log.info("WebSocket消息收到客户端消息:"+message);}/** 发送错误时的处理* @param session* @param error*/@OnErrorpublic void onError(Session session, Throwable error) {log.error("用户错误,原因:"+error.getMessage());log.error("WebSocket异常-错误信息(onError)，原因：" + error.getMessage());}// 此为广播消息public void sendAllMessage(String message) {log.info("WebSocket消息-广播消息:"+message);for(WebSocket webSocket : webSockets) {try {if(webSocket.session.isOpen()) {webSocket.session.getAsyncRemote().sendText(message);}} catch (Exception e) {log.error("WebSocket异常-广播消息异常(sendAllMessage)，原因：" + e.getMessage());}}}// 此为单点消息public void sendOneMessage(String userId, String message) {Session session = sessionPool.get(userId);if (session != null && session.isOpen()) {try {log.info("WebSocket消息-点对点消息:"+message);session.getAsyncRemote().sendText(message);} catch (Exception e) {log.error("WebSocket异常-点对点消息异常(sendOneMessage)，原因：" + e.getMessage());}}}}
2.4、测试类WebSocketController

  这个测试类，主要是为了测试发送信息后，页面可以自动更新。至此，服务端的配置就完成了。

@Controller
@RequestMapping("/api/msg")
public class WebSocketController {@Resourceprivate WebSocket webSocket;@RequestMapping("/all/{msg}") // 将消息发送到/topic/greetings路径下public void all(@PathVariable String msg) {//创建业务消息信息JSONObject obj = new JSONObject();obj.put("msg", msg);//消息内容//全体发送webSocket.sendAllMessage(obj.toJSONString());}@RequestMapping("/{userId}/{msg}") // 将消息发送到/topic/greetings路径下public void sendUser(@PathVariable String userId,@PathVariable String msg) {//创建业务消息信息JSONObject obj = new JSONObject();obj.put("msg", msg);//消息内容webSocket.sendOneMessage(userId, obj.toJSONString());}}

3、前端环境搭建

  前端是基于Vue实现，具体代码如下：

<template><div class="order-list"><span>TestMsg:{{ message }}</span></div>
</template>
<script>
export default {name: 'HomeView',data() {return {message:''}},components: {},created() {},mounted() {//初始化websocketthis.initWebSocket()},destroyed: function () { // 离开页面生命周期函数this.websocketclose();},computed: {},methods: {initWebSocket: function () { // 建立连接var userId = "test"//this.COMMON.getStorage("user");//对应@ServerEndpoint("/api/websocket/{userId}")中的地址var url = "ws://ip:port/项目名/api/websocket/" + userId;this.websock = new WebSocket(url);this.websock.onopen = this.websocketonopen;this.websock.send = this.websocketsend;this.websock.onerror = this.websocketonerror;this.websock.onmessage = this.websocketonmessage;this.websock.onclose = this.websocketclose;},// 连接成功后调用websocketonopen: function () {console.log("WebSocket连接成功");},// 发生错误时调用websocketonerror: function (e) {console.log("WebSocket连接发生错误" + JSON.stringify(e));},// 给后端发消息时调用websocketsend: function (e) {console.log("WebSocket连接发生错误" + JSON.stringify(e));},
// 接收后端消息// vue 客户端根据返回的cmd类型处理不同的业务响应websocketonmessage: function (e) {this.message = data;},// 关闭连接时调用websocketclose: function (e) {console.log("connection closed (" + e.code + ")");}},}
</script>
<style lang="scss"></style>

4、测试

  至此，我们就完成了WebSocket的服务端和前端的环境搭建，首先启动后台服务，然后启动前端服务，进入上述页面，这个时候就会建立起来链接，然后访问“http://localhost:8803/qriver-lab/api/msg/test/6666”，其中test对应的是userId，6666是msg信息，这个时候就会发现页面会自动显示6666，不需要进行刷新。
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/133732.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python 基础知识结构

Python 基础知识结构

一、关键字 二、内置函数 三、运算符 1、算数运算符 加 数字与字符串拼接 - 减 * 乘 数字与字符串重复 / 除 返回浮点数 % 取模 返回除法的余数 奇偶判断 ** 幂次 // 整除 返回商的整数部分&#xff0c;向下取整数&#xff0c;注意&#xff1a;-10//3,出现负数时的情况只要参…
阅读更多...
北斗+5G 织就精确定位的“天罗地网”

北斗+5G 织就精确定位的“天罗地网”

北斗卫星导航系统&#xff08;简称北斗系统&#xff09;是我国自主发展、独立运行的全球卫星导航系统&#xff0c;为全球用户提供全天候、全天时、高精度的定位、导航和授时服务。2020年7月31日&#xff0c;北斗三号系统建成开通并提供全球服务&#xff0c;北斗系统进入全面推广…
阅读更多...
基于element-ui的年份范围选择器

基于element-ui的年份范围选择器

基于element-ui的年份范围选择器 element-ui官方只有日期范围和月份范围选择器&#xff0c;根据需求场景需要&#xff0c;支持年份选择器&#xff0c;原本使用两个分开的年份选择器实现的&#xff0c;但是往往有些是不能接受的。在网上找了很多都没有合适的&#xff0c;所以打…
阅读更多...
第3章_瑞萨MCU零基础入门系列教程之开发环境搭建与体验

第3章_瑞萨MCU零基础入门系列教程之开发环境搭建与体验

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…
阅读更多...
Golang使用sqlx报错max_prepared_stmt_count超过16382

Golang使用sqlx报错max_prepared_stmt_count超过16382

文章目录 背景mysql的预处理查看实例预处理详情com_stmt_prepare开启performance_schema 本地查看预处理语句 预处理语句飙升的原因生成预处理语句但是不close执行sql过程中发生错误 go服务分析抓包分析发送给mysql的包debug查看预处理细节sqlx发送statement command指令sqlx关…
阅读更多...
第6章_瑞萨MCU零基础入门系列教程之串行通信接口（SCI）

第6章_瑞萨MCU零基础入门系列教程之串行通信接口（SCI）

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…
阅读更多...
Kafka3.0.0版本——消费者（Range分区分配策略以及再平衡）

Kafka3.0.0版本——消费者（Range分区分配策略以及再平衡）

目录 一、Range分区分配策略原理1.1、Range分区分配策略原理的示例一1.2、Range分区分配策略原理的示例二1.3、Range分区分配策略原理的示例注意事项 二、Range 分区分配策略代码案例2.1、创建带有4个分区的fiveTopic主题2.2、创建三个消费者 组成 消费者组2.3、创建生产者2.4、…
阅读更多...
PowerShell脚本免杀/bypass/绕过杀毒软件，ReconFTW 漏洞扫描

PowerShell脚本免杀/bypass/绕过杀毒软件，ReconFTW 漏洞扫描

PowerShell脚本免杀/bypass/绕过杀毒软件&#xff0c;ReconFTW 漏洞扫描。 #################### 免责声明&#xff1a;工具本身并无好坏&#xff0c;希望大家以遵守《网络安全法》相关法律为前提来使用该工具&#xff0c;支持研究学习&#xff0c;切勿用于非法犯罪活动&#…
阅读更多...
STM32 FreeRTOS 内存问题

STM32 FreeRTOS 内存问题

1. STM32L151C8T6 内存&#xff0c;64Kb 的Flash&#xff08;代码就是烧录在这里面的&#xff09;&#xff0c;16Kb 的RAM&#xff0c;程序跑起来之后的内存&#xff0c;相当于我们高考时发的草稿纸&#xff0c;直接影响程序的运行速度&#xff0c;可以用STM32 CubeMx 软件直接…
阅读更多...
【Linux】常用工具(上)

【Linux】常用工具(上)

Linux 常用工具 一、Linux 软件包管理器 yum1. 软件包2. 查看软件包3. 安装/卸载软件4. yum 其他指令的功能 二、Linux 编辑器 - vim 使用1. vim 的基本概念2. vim 的基本操作&#xff08;1&#xff09;光标移动&#xff08;命令模式&#xff09;&#xff08;2&#xff09;光标…
阅读更多...
性能测试之压力测试

性能测试之压力测试

文章目录 一.基本介绍二.性能指标三.下载安装JMeter1.下载安装包2.启动JMeter 四.使用JMeter1.模拟用户请求2.填写测试地址3.接收测试结果4.结果解释 一.基本介绍 压力测试考察当前软硬件条件下系统所能承受的最大负荷并找到系统瓶颈所在。压测是为了系统在线上的处理能力和稳定…
阅读更多...
Webserver项目解析

Webserver项目解析

一.webserver的组成部分 Buffer类 用于存储需要读写的数据 Channel类 存储文件描述符和相应的事件&#xff0c;当发生事件时&#xff0c;调用对应的回调函数 ChannelMap类 Channel数组&#xff0c;用于保存一系列的Channel Dispatcher 监听器&#xff0c;可以设置为epo…
阅读更多...
【数据结构】堆排序详解

【数据结构】堆排序详解

文章目录 一、堆排序思想二、向上调整建堆排序三、向下调整建堆排序四、总结 对于什么是堆&#xff0c;堆的概念分类以及堆的向上和向下两种调整算法可见&#xff1a; 堆的创建 一、堆排序思想 int a[] { 2,3,5,7,4,6 };对于这样一个数组来说&#xff0c;要想要用堆排序对它…
阅读更多...
学信息系统项目管理师第4版系列07_项目管理知识体系

学信息系统项目管理师第4版系列07_项目管理知识体系

1. 项目管理原则 1.1. 勤勉、尊重和关心他人 1.1.1. 关键点 1.1.1.1. 关注组织内部和外部的职责 1.1.1.2. 坚持诚信、关心、可信、合规原则 1.1.1.3. 秉持整体观 1.1.2. 职责 1.1.2.1. 诚信 1.1.2.2. 关心 1.1.2.3. 可信 1.1.2.4. 合规 1.2. 营造协作的项目管理团队…
阅读更多...
vim，emacs，verilog-mode这几个到底是啥关系？

vim，emacs，verilog-mode这几个到底是啥关系？

vim&#xff1a;不多说了被各类coder誉为地表最强最好用的编辑器&#xff1b;gvim&#xff0c;gui vim的意思&#xff1b; emacs&#xff1a;也是一个编辑器&#xff0c;类似vscode&#xff1b; vim在使用的时候为了增强其功能&#xff0c;有好多好多插件&#xff0c;都是以.…
阅读更多...
eNSP网络学习

eNSP网络学习

一、eNSP 1.什么是eNSP eNSP(Enterprise Network Simulation Platform)是一款由华为提供的免费的、可扩展的、图形化操作的网络仿真工具平台&#xff0c;主要对企业网络路由器、交换机进行软件仿真&#xff0c;完美呈现真实设备实景&#xff0c;支持大型网络模拟&#xff0c;让…
阅读更多...
浅谈C/S vs. B/S的区别

浅谈C/S vs. B/S的区别

目录 C/S简介: B/S简介&#xff1a; C/S-B/S区别: 1.硬件环境不同: 2.安全要求不同: 3.处理问题不同&#xff1a; 总结: C/S简介: C/S:客户机(Client)/服务器模式(Server)模型中&#xff0c;(C/S是Client/Server的缩写。客户端需要安装专用的客户端软件) 客户端和服务器…
阅读更多...
如何在谷某地球飞行模拟中导入简单飞机开发的飞机模型

如何在谷某地球飞行模拟中导入简单飞机开发的飞机模型

如何在谷某地球飞行模拟中导入简单飞机开发的飞机模型 简飞的飞友们&#xff01;我并没有弃坑&#xff0c;只不过我不是你们想象的那样设计飞机。我之前写过一篇图文讲解如何在谷某地球里规划飞行航线&#xff1a; 手把手教你驾驶西锐SR-22小飞机在美国大峡谷中穿行https://b…
阅读更多...
c语言每日一练(15)

c语言每日一练(15)

前言&#xff1a;每日一练系列&#xff0c;每一期都包含5道选择题&#xff0c;2道编程题&#xff0c;博主会尽可能详细地进行讲解&#xff0c;令初学者也能听的清晰。每日一练系列会持续更新&#xff0c;上学期间将看学业情况更新。 五道选择题&#xff1a; 1、程序运行的结果…
阅读更多...
【C++】红黑树插入操作实现以及验证红黑树是否正确

【C++】红黑树插入操作实现以及验证红黑树是否正确

文章目录 前言一、红黑树的插入操作1.红黑树结点的定义2.红黑树的插入1.uncle存在且为红2.uncle不存在3.uncle存在且为黑 3.完整代码 二、是否为红黑树的验证1.IsBlance函数2.CheckColor函数 三、红黑树与AVL树的比较 前言 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023