websocket--技术文档--spring后台+vue基本使用

阿丹:

        给大家分享一个可以用来进行测试websocket的网页,个人觉得还是挺好用的.

WebSocket在线测试工具

还有一个小家伙ApiPost也可以进行使用websocket的测试。

本文章只是基本使用--给大家提供思路简单实现!!

使用spring-boot建立一个服务端

在Spring Boot中使用WebSocket建立服务端,可以按照以下步骤进行:

  1. 确保的Spring Boot项目已经创建并配置好。
  2. 在项目的pom.xml文件中,添加WebSocket的依赖。
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
  1. 创建一个WebSocket配置类,用于配置WebSocket服务器。
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(myHandler(), "/websocket/test/{sid}");}@Beanpublic MyHandler myHandler() {return new MyHandler();}
}
  1. 创建一个WebSocket处理器类(MyHandler),用于处理WebSocket消息。
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;public class MyHandler extends TextWebSocketHandler {@Overridepublic void handleTextMessage(WebSocketSession session, TextMessage message) {// 处理接收到的文本消息System.out.println("Received message: " + message.getPayload());}@Overridepublic void onOpen(WebSocketSession session) {// 连接建立成功调用的方法System.out.println("New client connected: " + session.getPrincipal());}
}
  1. 在需要使用WebSocket的地方,例如控制器类,注入WebSocketSession,并使用sendMessage方法发送消息。

以上就是在Spring Boot中使用WebSocket建立服务端的步骤。注意,还需要根据实际情况进行进一步的配置和开发。

使用spring-boot建立一个客户端

要使用Spring Boot建立一个客户端,可以按照以下步骤进行:

  1. 确保的Spring Boot项目已经创建并配置好。
  2. 在项目的pom.xml文件中,添加Spring WebSocket的依赖。
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
  1. 创建一个WebSocket配置类,用于配置WebSocket客户端。
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocketClient;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketClientConfigurer;
import org.springframework.web.socket.client.WebSocketClient;
import org.springframework.web.socket.client.standard.StandardWebSocketClient;
import org.springframework.web.socket.handler.TextWebSocketHandler;@Configuration
@EnableWebSocketClient
public class WebSocketClientConfig implements WebSocketClientConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(myHandler(), "/websocket/test/{sid}");}@Beanpublic WebSocketClient myWebSocketClient() {return new StandardWebSocketClient();}@Beanpublic MyHandler myHandler() {return new MyHandler();}
}
  1. 创建一个WebSocket处理器类(MyHandler),用于处理WebSocket消息。
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;public class MyHandler extends TextWebSocketHandler {@Overridepublic void handleTextMessage(WebSocketSession session, TextMessage message) {// 处理接收到的文本消息System.out.println("Received message: " + message.getPayload());}
}
  1. 创建一个用于发送消息的控制器类。
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationListener;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessageSendingOperations;
import org.springframework.social.connect.*;
import org.springframework.web.*;
import org.springframework.*;import java.util.*;@RestController("/")
@RequestMapping("/")
public class WebSocketController {@Autowiredprivate SimpMessageSendingOperations operations;@Autowiredprivate WebSocketConnectionEstablishedEvent event;public void setEvent(WebSocketConnectionEstablishedEvent event) {this.event = event;}@MessageMapping("/greet/{name}")@SendTo("/topic/greet")public String greet(@PathVariable String name) {return "Hello, " + name + "!";}@RequestMapping(value = "/error", produces = MediaType.APPLICATION_JSON_VALUE)public Map<String, Object> handleError(HttpServletRequest request) {Map<String, Object> model = new HashMap<>();model.put("timestamp", new Date());model.put("status", HttpStatusInitializer.__getHttpStatus(request, NullPointerException));model.put("error", "Internal Server Error");model.put("exception", NullPointerException.__toString());model.put("message", "Something bad happened, please try again!");model.put("path", request.__toString());return model;}@Autowiredprivate WebSocketClient myWebSocketClient;@Autowiredprivate MyHandler myHandler;@Autowiredprivate ConnectionRepository connectionRepository;@Autowiredprivate AuthenticationRepository authenticationRepository;public void sendMessageToUser(@PathVariable String name, @RequestParam String message) {Iterable<Connection<?, ?>> connections = connectionRepository.findConnections(String FacebookMarker.ID);for (Connection<?, ?> connection : connections) {if (connection.getProvider().getId().equals(String FacebookMarker.ID) && connection.getDisplayName().equals(name)) {connectionRepository.createSendToUserChannel(connection.getId()).send(MessageBuilder.withPayload(message).build());break;}}}
}

在上述代码中,我添加了一个sendMessageToUser方法,它使用connectionRepository查找与指定用户名匹配的连接,然后通过向该用户的个人通道发送消息来向该用户发送消息。请注意,这里假设您已经实现了与Facebook的连接,并且使用FacebookMarker作为提供者的标识符。可以根据需要进行相应的调整。

使用vue来订阅连接成为一个websocket客户端

要在Vue中订阅WebSocket连接并成为客户端,你可以按照以下步骤进行操作:

  1. 安装WebSocket库:首先,你需要下载并安装WebSocket库。你可以使用npm或yarn来安装。在终端中运行以下命令来安装webstomp-client库:
npm install webstomp-client
  1. 创建一个WebSocket连接:在Vue组件中,你需要创建一个WebSocket连接。你可以在组件的created()钩子函数中创建连接。以下是一个示例代码片段:
<template><div><!-- 组件内容 --></div>
</template><script>
import WebSocket from 'webstomp-client';export default {name: 'WebSocketClient',data() {return {socket: null,};},created() {this.initializeWebSocket();},methods: {initializeWebSocket() {this.socket = new WebSocket('wss://your-websocket-url'); // 使用你的WebSocket URLthis.socket.onconnect = () => {console.log('WebSocket connected');};this.socket.onerror = (error) => {console.error('WebSocket error:', error);};this.socket.onclose = () => {console.log('WebSocket disconnected');};this.socket.onmessage = (message) => {console.log('Received message:', message);};},},
};
</script>

在上述代码中,我们首先导入WebSocket库,并在created()钩子函数中初始化WebSocket连接。你可以将wss://your-websocket-url替换为实际的WebSocket服务器URL。然后,我们定义了连接的回调函数,包括onconnectonerroroncloseonmessage。这些回调函数将在相应的WebSocket事件发生时执行。 3. 处理WebSocket消息:当从WebSocket接收消息时,你可以在onmessage回调函数中处理接收到的消息。你可以根据需要执行相应的操作,例如更新Vue组件的状态或触发其他行为。在上述示例代码中,我们只是简单地打印接收到的消息。 4. 发送WebSocket消息:要发送消息到WebSocket服务器,你可以使用WebSocket的send()方法。在Vue组件中,你可以定义一个方法来发送消息,并在需要发送消息时调用该方法。以下是一个示例代码片段:

<template><div><!-- 组件内容 --><button @click="sendMessage">Send Message</button></div>
</template><script>
import WebSocket from 'webstomp-client';export default {name: 'WebSocketClient',data() {return {socket: null,};},created() {this.initializeWebSocket();},methods: {initializeWebSocket() { /* ... */ }, // WebSocket连接初始化代码省略sendMessage() {const message = 'Hello, WebSocket Server!'; // 待发送的消息内容this.socket.send(message); // 发送消息到WebSocket服务器},},
};
</script>

在上述代码中,我们添加了一个按钮,并在点击时调用sendMessage()方法。该方法使用WebSocket的send()方法发送消息到服务器。请注意,你需要将实际的消息内容替换为'Hello, WebSocket Server!'

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

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

相关文章

【Vue】 Vue3 安装说明,适合小白新手

1、独立版本 我们可以在 Vue.js 的官网上直接下载最新版本, 并用 下载 Vue.js https://unpkg.com/vuenext 2、使用 CDN 方法 以下推荐国外比较稳定的两个 CDN&#xff0c;国内还没发现哪一家比较好&#xff0c;目前还是建议下载到本地。 Staticfile CDN&#xff08;国内&am…

Java低代码开发:jvs-list(列表引擎)功能(一)配置说明

在低代码开发平台中&#xff0c;列表页是一个用于显示数据列表的页面。它通常用于展示数据库中的多条记录&#xff0c;并提供搜索、排序和筛选等功能&#xff0c;以方便用户对数据进行查找和浏览。 jvs-list是jvs快速开发平台的列表页的配置引擎&#xff0c;它和普通的crud 具…

什么是SpringCloud Eureka服务注册与发现

&#x1f600;前言 本篇博文是关于SpringCloud Eureka 介绍&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的动力&…

CS420 课程笔记 P4 - 以16进制形态编辑游戏文件

文章目录 IntroductionFinding save filesStringsUnicodeExample!Value searchHealth searchConclusion Introduction 这节课我们将学习编辑十六进制&#xff0c;主要用于编辑保存文件&#xff0c;但十六进制编辑涉及的技能可以很好地转移到&#xff1a; Save file editingRe…

Flutter实现CombineExecutor进行多个异步分组监听,监听第一个异步执行的开始和最后一个异步执行结束时机。

1.场景 我们在调用接口时&#xff0c;很多时候会同时调用多个接口&#xff0c;接口都是异步执行&#xff0c;我们很难知道调用的多个接口哪个会最后执行完成&#xff0c;我们有时候需要对最后一个接口执行完成的时机监听&#xff0c;所以基于该需求&#xff0c;设计了CombineE…

Shell 运算符及语法结构

目录 一、Shell运算符 1.1 表达式expr 1.2 运算操作 1.3 操作实例 二、Shell条件判断 2.1 基本语法 2.2 值、权限、类型、多条件判断 三、Shell流程控制 3.1 if 流程语法 3.2 case 流程语法 3.3 for 流程语法 3.4 内部运算符 3.5 while循环流程语法 四、Shell读…

如何将两个pdf合并成一个?pdf合并技巧分享

在日常工作过程当中&#xff0c;我们经常需要处理一些文件&#xff0c;而文件的处理往往是琐碎的&#xff0c;想要提高工作效率&#xff0c;需要选择一些合适的方法&#xff0c;并掌握一定的技巧&#xff0c;那么&#xff0c;如何将两个pdf合并成一个?pdf合并技巧有哪些呢?接…

AFG EDI 解决方案

AFG一直是汽车行业出境物流的专家&#xff0c;不仅运输汽车&#xff0c;同时也提供模块化IT解决方案&#xff0c;用于接收、控制、互联以及整个车辆调度过程的可视化和监控。 对于物流行业而言&#xff0c;如果已经确定了供应链整合的目标&#xff0c;但却没有明确的计划及足够…

mac下配置JDK环境

一、下载安装 下载地址&#xff1a;Java Downloads | Oracle&#xff0c;选择适用于Mac OS的JDK版本&#xff0c;点击下载即可。 下载完之后&#xff0c;直接安装&#xff1a; 安装过程非常简单&#xff0c;按“继续”按钮一直下一步即可。 二、配置环境变量 上一步骤&#x…

Opencv 图像金字塔----高斯和拉普拉斯

原文&#xff1a;图像金字塔----高斯和拉普拉斯 图像金字塔是图像中多尺度表达的一种&#xff0c;最初用于机器视觉和图像压缩&#xff0c;最主要用于图像的分割、融合。 高斯金字塔 ( Gaussian pyramid): 高斯金字塔是由底部的最大分辨率图像逐次向下采样得到的一系列图像…

企微SCRM营销平台MarketGo-ChatGPT助力私域运营

一、前言 ChatGPT是由OpenAI&#xff08;开放人工智能&#xff09;研发的自然语言处理模型&#xff0c;其全称为"Conversational Generative Pre-trained Transformer"&#xff0c;即对话式预训练转换器。它是GPT系列模型的最新版本&#xff0c;GPT全称为"Gene…

指针进阶(一)

指针进阶 1. 字符指针面试题 2. 指针数组3. 数组指针3.1 数组指针的定义3.2 &数组名VS数组名 3.3 数组指针的使用4. 数组传参和指针传参4.1 一维数组传参4.2 二维数组传参4.3 一级指针传参4.4 二级指针传参 前言 指针的主题&#xff0c;我们在初级阶段的《指针》章节已经接…

NLP(2)--Transformer

目录 一、Transformer概述 二、输入和输出 三、Encoder 四、Decoder 五、正则化处理 六、对于结构的改进&#xff1f; 七、AT vs NAT 八、Cross-attention 一、Transformer概述 Transformer模型发表于2017年Google团队的Attention is All you need这篇论文&#xff0c;…

蓝桥杯打卡Day1

文章目录 全排列八皇后 一、全排列IO链接 本题思路:本题是一道经典的全排列问题&#xff0c;深度优先搜索即可解决。 #include <bits/stdc.h>constexpr int N10;std::string s; std::string ans; int n; bool st[N];void dfs(int u) {if(un){std::cout<<ans<…

前后端数据加密传输基于AES+RSA实现

前后端数据加密传输基于AESRSA实现 什么是AES和RSA AES AES&#xff08;Advanced Encryption Standard&#xff09;是一种对称加密算法&#xff0c;它的加密速度快&#xff0c;安全性也比较高&#xff0c;是目前广泛使用的加密算法之一。AES的密钥长度可以选择128位、192位和…

NetSuite海鲜书 - 知识会汇编 用户篇 2023

NetSuite2021年初夏&#xff0c;NetSuite知识会成立。它由本人&#xff0c;上海德之匠信息技术有限公司的毛岩喆&#xff08;江湖人称Rick&#xff09;发起建立。建立的初衷秉承Rick个人博客“学问思辨&#xff0c;企业信息化路上的行者”的理念&#xff0c;期望能够在NetSuite…

Flink基础

Flink architecture job manager is master task managers are workers task slot is a unit of resource in cluster, number of slot is equal to number of cores(超线程则slot2*cores), slot一组内存一些线程共享CPU when starting a cluster,job manager will allocate a …

docker快速安装-docker一键安装脚本

1.下载/配置安装脚本 touch install-docker.sh #!/bin/bash #mail:ratelcloudqq.com #system:centos7 #integration: docker-latestclear echo "######################################################" echo "# Auto Install Docker …

大数据组件-Flume集群环境搭建

&#x1f947;&#x1f947;【大数据学习记录篇】-持续更新中~&#x1f947;&#x1f947; 个人主页&#xff1a;beixi 本文章收录于专栏&#xff08;点击传送&#xff09;&#xff1a;【大数据学习】 &#x1f493;&#x1f493;持续更新中&#xff0c;感谢各位前辈朋友们支持…

AOP到底是啥

AOP到底是啥 前言面向切面编程到底是啥意思那么要怎么实现面向切面编程呢&#xff1f;成果 前言 回忆起来&#xff0c;第一次听到这三字母是博主在上大二的时候&#xff0c;那时候看的一脸懵逼&#xff0c;现在马上研二了才想起来回顾下。 只记得当时面向对象编程还没整明白&…