SpringBoot+vue实现WebSocket通信

news/2024/12/19 21:10:48/

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务器主动向客户端推送数据。

WebSocket的主要特点:

  1. 全双工通信:客户端和服务器之间的数据可以同时双向传输
  2. 低延迟:由于是持久连接,所以不需要每次通信都重新建立连接,这大大减少了延迟。
  3. 节省带宽:WebSocket只需要一次握手,后续的数据传输都是基于这个连接,因此相对HTTP轮询来说更加节省带宽。

WebSocket的基本使用流程:

  1. 客户端发起请求:客户端发起一个WebSocket请求到服务器
  2. 握手阶段:服务器同意请求后,双方进入全双工模式。
  3. 数据传输:客户端和服务器客厅通过send()方法发送数据,通过onmessage事件处理接收到的数据。
  4. 关闭连接:当不再需要通信时,可以调用close()方法关闭连接。

 服务器(SpringBoot)示例代码

依赖引入

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

WebSocket配置类

@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpoint() {return new ServerEndpointExporter();}}

业务处理类

@Slf4j
@Component
@ServerEndpoint("/websocket/{username}")
public class WebSocketTest {private Session session;private String username;private static ConcurrentHashMap<String, WebSocketTest> webSocketSet = new ConcurrentHashMap<>();@OnOpenpublic void onOpen(Session session, @PathParam("username") String username) {// 新的连接建立时执行,并且记录用户名this.session = session;this.username = username;webSocketSet.put(username, this);}@OnMessagepublic void onMessage(String message, Session session) {// 接收到前端消息时执行System.out.println("Received: " + message);try {session.getBasicRemote().sendText("Response from server: " + message);} catch (IOException e) {{e.printStackTrace();}}}@OnClosepublic void onClose (Session session, CloseReason closeReason){webSocketSet.remove(this.username);}@OnErrorpublic void onError (Session session, Throwable throwable){// 发生错误时执行System.out.println("Error ... " + session.getId());throwable.printStackTrace();}public void sendMessage2User(String message,String username) {try {webSocketSet.get(username).session.getBasicRemote().sendText(message);} catch (IOException e) {log.error("method=sendMessage2User||msg=send msg to user error", e);}}public void sendMessage() {String filePath = "C:/Users/heal/Desktop/1.txt"; // 替换为你的文件路径try (BufferedReader br = new BufferedReader(new FileReader(filePath))) {String line;while ((line = br.readLine()) != null) {// username需要从客户端传入,我这里只是测试,所以写死sendMessage2User(line,"admin");}} catch (IOException e) {e.printStackTrace();}}

服务器记录每次连接的用户名,用于每次发送请求的session认证 

客户端(vue)调用代码示例

import Vue from 'vue'const WebSocketPlugin = {install(Vue, options) {const ws = new WebSocket('wss://127.0.0.1:8443/webserver/websocket')Vue.prototype.$websocket = {send(message) {if (ws.readyState === WebSocket.OPEN) {ws.send(message)}},onMessage(callback) {ws.onmessage = callback},onOpen(callback) {ws.onopen = callback},onClose(callback) {ws.onclose = callback},onError(callback) {ws.onerror = callback}}Vue.mixin({created() {if (this.$options.websocket) {this.$websocket.onMessage((message) => {// 处理接收到的消息console.log(message)})}}})}
}export default WebSocketPlugin

send() {this.$websocket.send('Hello, WebSocket!')},

也可以使用apifox直接发请求到服务器

这样就吧文件中的内容实时的返回给客户端了 


http://www.ppmy.cn/news/1556479.html

相关文章

Linux文件属性 --- 七种文件类型---文件.目录、软硬链接、字符设备文件

目录 七种文件类型 1、普通文件和目录 2、链接文件 2.1硬链接 2.2软链接 3、字符设备文件 一、七种文件类型 Linux的文件属性中一共有以下七种类型 &#xff1a; 符号类型含义解释-普通文件纯文本文件&#xff08;ASCII&#xff09;和二进制文件&#xff08;binary&#xff…

PostgreSQL中事件触发器Event Trigger

在PostgreSQL中&#xff0c;事件触发器&#xff08;Event Trigger&#xff09;是一种特殊的触发器类型&#xff0c;它允许你在特定的数据库系统事件发生时执行特定的操作。与普通的触发器不同&#xff0c;事件触发器并不与特定的表或视图相关联&#xff0c;而是与数据库级别的全…

C++ OCR证件照文字识别

一.引言 文字识别&#xff0c;也称为光学字符识别&#xff08;Optical Character Recognition, OCR&#xff09;&#xff0c;是一种将不同形式的文档&#xff08;如扫描的纸质文档、PDF文件或数字相机拍摄的图片&#xff09;中的文字转换成可编辑和可搜索的数据的技术。随着技…

SQLMAP

Taeget 实践内容&#xff1a;练习使用 SQLMap 进行自动化 SQL 注入。 涉及知识点&#xff1a;理解 SQL 注入、SQLMap 工具使用、自动化攻击、Web 应用安全。 Trial 说明&#xff1a;Sqlmap是一个开源的渗透测试工具&#xff0c;可以自动检测和利用SQL注入漏洞&#xff0c;并…

【算法】图论中DFS和BFS模板讲解

图论的解题模板和二叉树基本一致&#xff0c;都是在DFS和BFS基础上进行求解。 二叉树的DFS和BFS模板如下所示&#xff1a; public void DFSTree(TreeNode root){if(rootnull)return null;DFSTree(root.left);DFSTree(root.right); } public void BFSTree(TreeNode ro…

免费开源了一个图床工具 github-spring-boot-starter

文章目录 第一步&#xff0c;新建一个SpringBoot项目第二步&#xff0c;在pom文件里面引入jar包第三步&#xff0c;配置你的github信息github.authorization1、进入github官网&#xff0c;登录账号&#xff0c;点击头像&#xff0c;选择setting2、选择[Developer Settings](htt…

[Unity Shader] 【游戏开发】Unity Shader的结构2-深入理解 SubShader 的结构与应用

在 Unity 中,Shader 是图形渲染管线中的核心组件,而 SubShader 是 Shader 结构中不可或缺的部分。每个 Unity Shader 文件可以包含多个 SubShader,它们根据不同的显卡和硬件条件提供不同的渲染实现。本文将详细介绍 SubShader 的结构、标签(Tags)、渲染设置(RenderSetup)…

Android14 AOSP支持短按关机

修改frameworks/base/services/core/java/com/android/server/policy/PhoneWindowManager.java diff --git a/base/services/core/java/com/android/server/policy/PhoneWindowManager.java b/base/services/core/java/com/android/server/policy/PhoneWindowManager.java in…