当前位置: 首页 > news >正文

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!'

相关文章:

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

阿丹: 给大家分享一个可以用来进行测试websocket的网页&#xff0c;个人觉得还是挺好用的. WebSocket在线测试工具 还有一个小家伙ApiPost也可以进行使用websocket的测试。 本文章只是基本使用--给大家提供思路简单实现&#xff01;&#xff01; 使用spring-boot建立一个服…...

day01-ES6新特性以及ReactJS入门

课程介绍 ES6新特性ReactJS入门学习 1、ES6 新特性 1.2、let 和 const 命令 var 之前&#xff0c;我们写js定义变量的时候&#xff0c;只有一个关键字&#xff1a; var var 有一个问题&#xff0c;变量作用域的问题&#xff0c;作用域不可控&#xff0c;就是定义的变量有时会…...

MySQL5.7慢查询实践

总结 获取慢查询SQL 已经执行完的SQL&#xff0c;检查慢查询日志&#xff0c;日志中有执行慢的SQL正在执行中的SQL&#xff0c;show proccesslist;&#xff0c;结果中有执行慢的SQL 慢查询日志关键参数 名称解释Query_time查询消耗时间Time慢查询发生时间 分析慢查询SQL e…...

MySQL数据库的增删改查(进阶)

目录 数据库约束 约束类型 NULL约束 UNIQUE&#xff1a;唯一约束 DEFAULT&#xff1a;默认值约束 PRIMARY KEY&#xff1a;主键约束 FOREIGN KEY&#xff1a;外键约束 表的设计 一对一关系 一对多关系 多对多关系 查询 聚合查询 聚合函数 GROUP BY子句 HAVING …...

韶音骨传导耳机好不好用,韶音的骨传导耳机怎么样

提到韶音骨传导耳机&#xff0c;相信很多人在第一时间会想到韶音OpenRun Pro这一款骨传导耳机&#xff0c;这是在去年韶音新发布的一款骨传导耳机&#xff0c;在佩戴舒适性面做了很多优化&#xff0c;采用了夹紧力道适度的柔韧钛合金材质后挂&#xff1b;发声单元包裹柔软硅胶材…...

Nginx从安装到使用,反向代理,负载均衡

什么是Nginx&#xff1f; 文章目录 什么是Nginx&#xff1f;1、Nginx概述1.1、Nginx介绍1.2、Nginx下载和安装1.3、Nginx目录结构 2、Nginx命令2.1、查看版本2.2、检查配置文件正确性2.3、启动和停止2.4、重新加载配置文件2.5、环境变量的配置 3、Nginx配置文件结构4、Nginx具体…...

freertos之资源管理

中断屏蔽 屏蔽中断函数 在任务中使用 taskENTER_CRITICA()/taskEXIT_CRITICAL() 在中断中使用 taskENTER_CRITICAL_FROM_ISR()/taskEXIT_CRITICAL_FROM_ISR() 功能介绍 使用上述函数&#xff0c;进入临界中断&#xff0c;任务不会切换&#xff0c;且中断优先级处于con…...

1.创建项目(wpf视觉项目)

目录 前言本章环境创建项目启动项目可执行文件 前言 本项目主要开发为视觉应用&#xff0c;项目包含&#xff08;视觉编程halcon的应用&#xff0c;会引入handycontrol组件库&#xff0c;工具库Masuit.Tools.Net&#xff0c;数据库工具sqlSugar等应用&#xff09; 后续如果还有…...

使用element-ui导航,进入对应的三级页面菜单保持点击状态

1.注意事项 01.路由中使用了keepAlive属性&#xff0c;要用keepAlive&#xff1a;true&#xff0c;不能等于false&#xff0c;使用false页面会刷新 2.使用的方法 NavMenu 导航菜单 3.项目实例 <template><div class"policy-home"><div class"…...

golang字符串转64位整数

在Go语言中&#xff0c;可以使用strconv包中的ParseInt函数将字符串转换为64位整数。以下是一个示例代码&#xff1a; package main import ( "fmt" "strconv" ) func main() { str : "12345" num, err : strconv.ParseInt(str, 10, 64…...

创作纪念日-我的第1024天

机缘 不知不觉已经成为创作者的第1024天啦… … 刚开始接触博客的初衷就是为了记笔记&#x1f4d2;、记总结&#x1f4dd;&#xff0c;或许对于当时就等同于是为了找工作。坚持学习并持续输出博客一年后&#xff0c;这时我发现再写博客&#xff0c;不在是为了找一份工作&…...

【线上问题】很抱歉,如果没有 JavaScript 支持,将不能正常工作

目录 一、问题说明二、解决方式 一、问题说明 1.修改了nginx的配置 2.postman调用接口正常&#xff0c;浏览器访问接口200&#xff0c;但无数据 3.浏览器访问&#xff0c;nginx没有访问记录&#xff0c;接口请求到不了应用服务 4.原因不祥 二、解决方式 1.清理了浏览器缓存...

便捷、快速、稳定、高性能!以 GPU 实例演示 Alibaba Cloud Linux 3 对 AI 生态的支持 | 龙蜥技术

编者按&#xff1a;日前&#xff0c;Alibaba Cloud Linux 3 为使 AI 开发体验更高效&#xff0c;提供了一些优化升级&#xff0c;本文为“Alibaba Cloud Linux 3 AI 能力介绍”系列文章预告篇&#xff0c;以 GPU 实例为例&#xff0c;为大家演示 Alibaba Cloud Linux 3 对 AI 生…...

创新科技改变城市:智慧城市建设全景展望

在当今科技飞速发展的时代&#xff0c;智慧城市的概念已经成为城市发展的新趋势&#xff0c;为人们的生活带来了前所未有的便利和改变。智慧城市&#xff0c;顾名思义&#xff0c;是以先进的信息技术为基础&#xff0c;通过数字化、互联网化和智能化手段&#xff0c;实现城市基…...

Kotlin 环境下解决属性初始化问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

Java复习-20-接口(3)- 代理设计模式

代理设计模式(Proxy) 功能&#xff1a;可以帮助用户将所有的开发注意力只集中在核心业务功能的处理上。 代理模式(Proxy Pattern)是一种结构性模式。代理模式为一个对象提供了一个替身&#xff0c;以控制对这个对象的访问。即通过代理对象访问目标目标对象&#xff0c;可以在目…...

如何远程访问Linux MeterSphere一站式开源持续测试平台

文章目录 前言1. 安装MeterSphere2. 本地访问MeterSphere3. 安装 cpolar内网穿透软件4. 配置MeterSphere公网访问地址5. 公网远程访问MeterSphere6. 固定MeterSphere公网地址 前言 MeterSphere 是一站式开源持续测试平台, 涵盖测试跟踪、接口测试、UI 测试和性能测试等功能&am…...

LinuxUbuntu安装OpenWAF

Linux&Ubuntu安装OpenWAF 官方GitHub地址 介绍 OpenWAF&#xff08;Web Application Firewall&#xff09;是一个开源的Web应用防火墙&#xff0c;用于保护Web应用程序免受各种网络攻击。它通过与Web服务器集成&#xff0c;监控和过滤对Web应用程序的流量&#xff0c;识…...

LeetCode 剑指offer 09.用两个栈实现队列

LeetCode 剑指offer 09.用两个栈实现队列 题目描述 用两个栈实现一个队列。队列的声明如下&#xff0c;请实现它的两个函数 appendTail 和 deleteHead &#xff0c;分别完成在队列尾部插入整数和在队列头部删除整数的功能。(若队列中没有元素&#xff0c;deleteHead 操作返回…...

第三方软件检测机构有哪些资质,2023年软件测评公司推荐

软件第三方测试报告 伴随着软件行业的蓬勃发展&#xff0c;软件测试也迎来了热潮&#xff0c;但是国内的软件测试行业存在着测试入行门槛低、测试投入少、测试人员专业性不足等问题&#xff0c;这些问题不但会阻碍软件测试行业的良性发展&#xff0c;而且难以保证软件产品的质…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...