springboot使用WebSocket

server/2024/9/21 11:28:29/

1、、创建springboot项目，勾选Spring web，并导包

  1. 当前springboot选择的是2.6.13版本，jdk1.8
  2. 尽量选2.几的springboot
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<!--工具类 --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.4.1</version>
</dependency>
<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId>
</dependency>

websocket_22">2、新建一个websocket包，包中新建两个类，代码如下

package com.example.it.springboot.websocket;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
//websocket包需要与启动类同级别
@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();}
}

package com.example.springbootwebsocket.websocket;/*高于springboot3.0的用这个jakarta
import jakarta.websocket.OnClose;
import jakarta.websocket.OnMessage;
import jakarta.websocket.OnOpen;
import jakarta.websocket.Session;
import jakarta.websocket.server.ServerEndpoint;
*/
import lombok.extern.slf4j.Slf4j;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;import cn.hutool.json.JSONUtil;import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;/**** 监听websocket地址  /myWs*/
@ServerEndpoint("/myWs")
@Component
@Slf4j
@EnableScheduling
public class WsServerEndpoint {static Map<String, Session> map = new ConcurrentHashMap<String,Session>();//新增一个方法用于主动向客户端发送消息public static void sendMessage(Object message, String userId) {Session session = map.get(userId);if (session != null) {try {session.getBasicRemote().sendText(JSONUtil.toJsonStr(message));System.out.println("【websocket消息】发送消息成功,用户="+userId+",消息内容"+message.toString());} catch (IOException e) {e.printStackTrace();}}}/**** 连接建立时执行的操作* @param session*/@OnOpenpublic void onOpen(Session session){map.put(session.getId(),session);log.info("session.getId()="+session.getId());log.info("session="+session);log.info("websocket is open");}/**** 收到客户端消息执行的操作* @param text*/@OnMessagepublic String OnMessage(String text){log.info("收到了一条信息:  "+text);return "已收到你的信息" ;}/**** 连接关闭时执行的操作* @param session*/@OnClosepublic void OnClose(Session session){map.remove(session.getId());log.info("websocket is close");}/**** 向客户端发送信息*/@Scheduled(fixedRate = 2000)public void sendMsg() throws IOException {for (String key : map.keySet()){//map.get(key).getBasicRemote().sendText("定时发送，你好");}}
}

websockethtml_138">3、新建一个websocket.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>wsClient</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><style>.btn-group{display: inline-block;}</style>
</head>
<body>
<input type='text' value='ws://localhost:8080/myWs' class="form-control" style='width:390px;display:inline'id='wsaddr' />
<div class="btn-group" ><button type="button" class="btn btn-default" onclick='addsocket();'>连接</button><button type="button" class="btn btn-default" onclick='closesocket();'>断开</button><button type="button" class="btn btn-default" onclick='$("#wsaddr").val("")'>清空</button><button type="button" class="btn btn-default" onclick='restore()'>还原</button>
</div>
<div id="output" style="border:1px solid #ccc;height:365px;overflow: auto;margin: 20px 0;"></div><input type="text" id='message' class="form-control" style='width:810px' placeholder="待发信息" onkeydown="en(event);"><span class="input-group-btn"><button class="btn btn-default" type="button" onclick="doSend();">发送</button></span>
</div><script>/*组织时间*/function formatDate(now) {var year = now.getFullYear();var month = now.getMonth() + 1;var date = now.getDate();var hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();return year + "-" + (month = month < 10 ? ("0" + month) : month) + "-" + (date = date < 10 ? ("0" + date) : date) +" " + (hour = hour < 10 ? ("0" + hour) : hour) + ":" + (minute = minute < 10 ? ("0" + minute) : minute) + ":" + (second = second < 10 ? ("0" + second) : second);}var output;var websocket;function init() {output = document.getElementById("output");}/*连接按钮*/function addsocket() {var wsaddr = $("#wsaddr").val();if (wsaddr == '') {alert("请填写websocket的地址");return false;}StartWebSocket(wsaddr);}/*断开按钮*/function closesocket() {websocket.close();}/*还原按钮*/function restore(){$("#wsaddr").val('ws://localhost:8080/myWs');}function en(event) {var evt = evt ? evt : (window.event ? window.event : null);if (evt.keyCode == 13) {doSend()}}/*发送按钮*/function doSend() {var message = $("#message").val();if (message == '') {alert("请先填写发送信息");$("#message").focus();return false;}if (typeof websocket === "undefined") {alert("websocket还没有连接，或者连接失败，请检测");return false;}if (websocket.readyState == 3) {alert("websocket已经关闭，请重新连接");return false;}console.log(websocket);$("#message").val('');writeToScreen('<span style="color:green">你发送的信息&nbsp;' + formatDate(new Date()) + '</span><br/>' + message);websocket.send(message);}/*书写内容*/function StartWebSocket(wsUri) {websocket = new WebSocket(wsUri);websocket.onopen = function(evt) {onOpen(evt)};websocket.onclose = function(evt) {onClose(evt)};websocket.onmessage = function(evt) {onMessage(evt)};websocket.onerror = function(evt) {onError(evt)};}function onOpen(evt) {writeToScreen("<span style='color:red'>连接成功，现在你可以发送信息啦！！！</span>");}function onClose(evt) {writeToScreen("<span style='color:red'>websocket连接已断开!!!</span>");websocket.close();}function onMessage(evt) {writeToScreen('<span style="color:blue">服务端回应&nbsp;' + formatDate(new Date()) + '</span><br/><span class="bubble">' +evt.data + '</span>');}function onError(evt) {writeToScreen('<span style="color: red;">发生错误:</span> ' + evt.data);}function writeToScreen(message) {var div = "<div class='newmessage'>" + message + "</div>";var d = $("#output");var d = d[0];var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;$("#output").append(div);if (doScroll) {d.scrollTop = d.scrollHeight - d.clientHeight;}}</script>
</body>
</html>

4、新建一个后台发送测试类

package com.example.it.springboot.controller;import com.example.it.springboot.websocket.WsServerEndpoint;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;import java.io.IOException;@Controller
public class TestController {private WsServerEndpoint wsServerEndpoint;//localhost:8080/hello@GetMapping("/hello")public String setHello2() {System.out.println("Hello ???");wsServerEndpoint.sendMessage("我发了一个测试","0");return "Hello";}
}

websockethtml_316">5、访问websocket.html，进行测试，

参考链接


http://www.ppmy.cn/server/100141.html

相关文章

Video视频抽帧和WebCodecs API视频抽帧介绍

Video视频抽帧和WebCodecs API视频抽帧介绍

目录 mp4Box抽帧 ffmpeg抽帧 video元素抽帧 WebCodecs 核心API 视频文件是一个容器&#xff0c;里面有很多不同的轨道信息。如&#xff1a;图像、声音、字幕等。而视频图像信息又是由一系列图片序列帧的集合。如10秒时长的视频&#xff0c;假设每秒30帧。那大概有300条图像…
阅读更多...
relativePath

relativePath

Maven中的parent.relativePath元素用于指定父POM的相对路径。当你看到这样的错误信息时&#xff0c;它意味着Maven期望在某个位置找到一个父POM&#xff0c;但实际上找到的是另一个POM。 在你的情况下&#xff0c;错误信息表明com.cubemall:cubemall-product:0.0.1-SNAPSHOT项…
阅读更多...
网络如何发送一个数据包

网络如何发送一个数据包

网络如何发送一个数据包 网络消息发送就是点一点屏幕。 骚瑞&#xff0c;这一点都不好笑。&#xff08;小品就是我的本质惹&#xff09; 之前我就是会被这个问题搞的不安宁。是怎么知道对方的IP地址的呢&#xff1f;怎么知道对方的MAC呢&#xff1f;世界上计算机有那么多&…
阅读更多...
Element UI左侧导航栏写法（递归组件实现）

Element UI左侧导航栏写法（递归组件实现）

1、左侧导航栏组件使用的是Element Ui的导航栏组件&#xff0c;思路&#xff1a;首先判断导航栏数据是否存在children&#xff0c;以此来实现一级菜单与多级菜单的渲染&#xff0c;然后使用递归组件实现多级菜单的子菜单渲染&#xff0c;注意使用递归组件需将菜单栏数据在父组件…
阅读更多...
ES环境搭建、ES安装

ES环境搭建、ES安装

文章目录 简介与环境搭建全文检索倒排索引ElasticSearchWindows安装ES下载配置JDK环境启动ES服务 centos7安装ES下载ElasticSearch创建es用户配置JDK环境配置ElasticSearch配置JVM参数启动ElasticSearch服务常见启动报错 客户端Kibana安装下载修改Kibana.yml运行Kibana访问 ES安…
阅读更多...
CSS

CSS

注释 /*单行*/ /* 多行 */样式选择器&#xff0c;属性名&#xff0c;属性值关键字全部使用小写字母 <head> <style> p { color: red; } </style> </head>字体属性 用于定义字体系列、大小、粗细、和文字样式 字体系列 font-family属性定义文本的…
阅读更多...
Excel周报制作

Excel周报制作

学习视频&#xff1a; 【课程2.0】Excel基础操作|大厂周报制作|常用函数_哔哩哔哩_bilibili 作品介绍&#xff1a; 做一个联动性非常强的Excel周报&#xff0c;如图所示&#xff0c;每个数据之间都有关联&#xff0c;改动起来非常方便&#xff0c;对基本函数也有了很深入的认…
阅读更多...
QTableWidget 如何设置自动列宽？

QTableWidget 如何设置自动列宽？

在 Qt 的 QTableWidget 中&#xff0c;设置自动列宽通常意味着让列宽根据列内容自动调整&#xff0c;以确保内容不会被截断且表格看起来更加整洁。Qt 提供了几种方式来实现这一点&#xff0c;但需要注意的是&#xff0c;QTableWidget 本身并没有直接提供一个“一键设置所有列自…
阅读更多...
最新文章

Copyright @ 2022~2023