一、什么是websocket

WebSocket是HTML5下一种新的协议(websocket协议本质上是一个基于tcp的协议)
它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯的目的
Websocket是一个持久化的协议

二、新建SpringBoot工程


按照上图这样配置即可,点击下一步
因为本文章只实现websocket功能,所以只勾选SpringWeb,同时要保证springboot版本要低于3.0

创建完的工程目录如下

三、修改配置文件

将application.properties修改为application.yml,然后修改内容为

#服务器配置
server:port: 8081servlet:context-path: /api

修改POM.xml,在dependencies下加入所需依赖,加入后在空白处右键点击重新加载项目,下载对应依赖

<dependency><groupId>org.springframework</groupId><artifactId>spring-websocket</artifactId><version>5.2.8.RELEASE</version>
</dependency>
<!--工具类 --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.4.1</version>
</dependency>

新建一个websocket包,包中新建两个类,代码如下

package com.example.demo.websocket;import cn.hutool.json.JSONUtil;
import org.springframework.stereotype.Component;import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;@ServerEndpoint(value = "/websocket/{userId}")
@Component
public class WebSocket {private static ConcurrentHashMap<String, WebSocket> webSocketMap = new ConcurrentHashMap<>();//实例一个session,这个session是websocket的sessionprivate Session session;//新增一个方法用于主动向客户端发送消息public static void sendMessage(Object message, String userId) {WebSocket webSocket = webSocketMap.get(userId);if (webSocket != null) {try {webSocket.session.getBasicRemote().sendText(JSONUtil.toJsonStr(message));System.out.println("【websocket消息】发送消息成功,用户="+userId+",消息内容"+message.toString());} catch (IOException e) {e.printStackTrace();}}}public static ConcurrentHashMap<String, WebSocket> getWebSocketMap() {return webSocketMap;}public static void setWebSocketMap(ConcurrentHashMap<String, WebSocket> webSocketMap) {WebSocket.webSocketMap = webSocketMap;}//前端请求时一个websocket时@OnOpenpublic void onOpen(Session session, @PathParam("userId") String userId) {this.session = session;webSocketMap.put(userId, this);sendMessage("CONNECT_SUCCESS", userId);System.out.println("【websocket消息】有新的连接,连接id"+userId);}//前端关闭时一个websocket时@OnClosepublic void onClose() {webSocketMap.remove(this);System.out.println("【websocket消息】连接断开,总数:"+ webSocketMap.size());}//前端向后端发送消息@OnMessagepublic void onMessage(String message) {if (!message.equals("ping")) {System.out.println("【websocket消息】收到客户端发来的消息:"+message);}}
}
package com.example.demo.websocket;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;//开启WebSocket的支持,并把该类注入到spring容器中
@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}}

四、项目完整结构如下

五、测试功能

点击运行按钮,可以看到控制台对应的输出,输出看到JVM running for 表示启动成功

在桌面新建一个websocket.html,将代码复制进去

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>本地websocket测试</title><meta name="robots" content="all" /><meta name="keywords" content="本地,websocket,测试工具" /><meta name="description" content="本地,websocket,测试工具" /><style>.btn-group{display: inline-block;}</style></head><body><input type='text' value='通信地址, ws://开头..' 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></div><div class="row"><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></div></body>       <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script language="javascript" type="text/javascript">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");testWebSocket();}function addsocket() {var wsaddr = $("#wsaddr").val();if (wsaddr == '') {alert("请填写websocket的地址");return false;}StartWebSocket(wsaddr);}function closesocket() {websocket.close();}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 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 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;}}function en(event) {var evt = evt ? evt : (window.event ? window.event : null);if (evt.keyCode == 13) {doSend()}}</script></html>

双击打开这个html文件,页面的功能如下,websocket的通信地址要以ws://开头,因为我的springboot启动在8081端口,所以我的地址就是 ws://localhost:8081/api/websocket/{连接id},websocket前面加了api是前面在yml文件中配置了context-path,没有配置可以去掉。实际项目中,将连接id换成唯一的用户id即可向指定用户发送消息。

效果如下

这时候服务器控制台输出为

到此,SpringBoot搭建WebSocket就已经完成,还有什么问题可以私信作者~

SpringBoot实现WebSocket相关推荐

  1. SpringBoot 集成 WebSocket,实现后台向前端推送信息

    作者 | 大树先生 来源 | https://blog.csdn.net/MacWx/article/details/111319558 前言 在一次项目开发中,使用到了Netty网络应用框架,以及M ...

  2. SpringBoot集成WebSocket,实现后台向前端推送信息

    作者 | 大树先生 来源 | https://blog.csdn.net/MacWx/article/details/111319558 前言 在一次项目开发中,使用到了Netty网络应用框架,以及M ...

  3. Springboot集成websocket实例

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

  4. Springboot整合Websocket遇到的坑_websocket session不支持序列化,无法存储至redis_Websocket相关问题总结(Session共享,用户多端登录等)

    Springboot整合Websocket遇到的坑 一.使用Springboot内嵌的tomcat启动websocket 1.添加ServerEndpointExporter配置bean @Confi ...

  5. SpringBoot使用Websocket

    webSocket是HTML5的一种新协议,它实现了服务端与客户端的全双工通信,建立在传输层,tcp协议之上,即浏览器与服务端需要先建立tcp协议,再发送webSocket连接建立请求.webSock ...

  6. springboot中websocket服务怎么调用其他类的方法

    前言: 之前有写过一个springboot整合websocket的博客(SpringBoot 集成websocket_清泉影月的博客-CSDN博客),最开始的使用场景就是用websocket发消息给其 ...

  7. 最简单的springboot整合websocket方式

    简介 WebSocket是一种与HTTP不同的协议.两者都位于OSI模型的应用层,并且都依赖于传输层的TCP协议. 虽然它们不同,但是RFC 6455中规定:it is designed to wor ...

  8. SpringBoot基于websocket的网页聊天

    一.入门简介 正常聊天程序需要使用消息组件ActiveMQ或者Kafka等,这里是一个Websocket入门程序. 有人有疑问这个技术有什么作用,为什么要有它? 其实我们虽然有http协议,但是它有一 ...

  9. Springboot 整合Websocket+Stomp协议+RabbitMQ做消息代理 实例教程

    前言 如果你还没有了解过websocket,关于整合websocket的简单入门使用,可以先看看我这篇: <SpringBoot 整合WebSocket 简单实战案例> https://b ...

  10. 在线聊天室的消息单聊的实现——springboot整合WebSocket(二)

    一.声明 项目的搭建请大家移步到:在线聊天室的消息群聊的实现--springboot整合WebSocket(一) 单聊的实现是在群聊项目上进行延申改造的. 二.引入依赖 <dependency& ...

最新文章

  1. 需要注意变量作用域的使用
  2. java连接rabbitmq_没用过消息队列?一文带你体验RabbitMQ收发消息
  3. webpack从入门到精通(三)生产环境的基本配置
  4. ACL 2019开源论文 | 基于Attention的知识图谱关系预测
  5. 如何使用facenet详解_松下电吹风如何使用 松下电吹风使用方法及维护【详解】...
  6. 怎么关闭苹果手机自动扣费_这些手机功能不关闭,可能会被“自动扣费”
  7. HDU1290 重建希望小学【递推+打表】
  8. Jquery遍历之获取子级元素、同级元素和父级元素
  9. java 读写acr122u_树莓派使用ACR122U读写IC卡
  10. Android 安装 GMS 方法
  11. ubuntu安装anjuta
  12. 京东静态网页设计案例(1)
  13. PostGis创建空间数据库方法
  14. 如何快速有效的发散思维?
  15. Zhishi.me - Weaving Chinese Linking Open Data
  16. word方框内插入对勾
  17. html时间戳转日期
  18. java 表达式短路_什么是短路?在Java中进行编程时如何使用短路?
  19. djcpth计算机实验报告,计算机组成原理实验
  20. 【操作系统之进程调度算法习题】

热门文章

  1. 深夜调试某浏览器内存损坏的小记录
  2. html face使用方法,@font-face的用法
  3. 亿级App陌陌发力移动直播 率先拥抱视频社交
  4. VB.NET Declare语句
  5. declare 命令
  6. Python爬虫——列表信息写入到csv文件
  7. php ajax parsererror,mui.ajax报错 error:parsererror
  8. [AHK]为通达信增加打开关闭交易窗口的功能热键
  9. 计算机桌面图标方向变了,电脑桌面图标汉字变成了小框框如何处理
  10. 不需要苹果官方支持,可重置MAC系统固件密码