SpringBoot 使用WebSocket功能(实现步骤)
作者：清山博客
本文通过详细步骤介绍了SpringBoot 使用WebSocket功能,首先需要导入WebSocket坐标,编写WebSocket配置类,用于注册WebSocket的Bean,结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
实现步骤：
1.导入WebSocket坐标。
在pom.xml中增加依赖项：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
2.编写WebSocket配置类，用于注册WebSocket的Bean。
package com.rc114.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* WebSocket配置类，用于注册WebSocket的Bean
* @author Administrator
*/
@Configuration
public class WebSocketConfiguration {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}3.编写WebSocketServer类。
package com.rc114.websocket;
import jakarta.websocket.OnClose;
import jakarta.websocket.OnMessage;
import jakarta.websocket.OnOpen;
import jakarta.websocket.Session;
import jakarta.websocket.server.PathParam;
import jakarta.websocket.server.ServerEndpoint;
import org.springframework.stereotype.Component;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
/**
* WebSocket服务
* @author Administrator
*/
@Component // 交给spring容器管理
@ServerEndpoint("/ws/{sid}") // 路径请求
public class WebSocketServer {
//存放会话对象
private static Map<String, Session> sessionMap = new HashMap();
/**
* 连接建立成功调用的方法
*/
@OnOpen
public void onOpen(Session session, @PathParam("sid") String sid) {
System.out.println("客户端：" + sid + "建立连接");
sessionMap.put(sid, session);
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, @PathParam("sid") String sid) {
System.out.println("收到来自客户端：" + sid + "的信息:" + message);
}
/**
* 连接关闭调用的方法
*
* @param sid
*/
@OnClose
public void onClose(@PathParam("sid") String sid) {
System.out.println("连接断开:" + sid);
sessionMap.remove(sid);
}
/**
* 群发
*
* @param message
*/
public void sendToAllClient(String message) {
Collection<Session> sessions = sessionMap.values();
for (Session session : sessions) {
try {
//服务器向客户端发送消息
session.getBasicRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}4.测试WebSocket
编写一个测试WebSocket的html页面：
<html>
<head>
<title>WebSocket测试页面</title>
<style type="text/css">
* {
font-size: 14px;
line-height: 22px;
}
.main {
border: 0px solid #ccc;
width: 60%;
margin: 0 auto;
padding: 10px;
}
.main-table {
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
}
.main-table td {
border: 1px solid #ccc;
padding: 5px;
}
.td-left {
text-align: right;
}
input[type="text"] {
border: 1px solid #ccc;
padding: 5px;
outline: none;
width: 200px;
}
input[type="button"] {
border: 1px solid #ccc;
padding: 3px 10px;
outline: none;
}
.green {
color: green;
}
.red {
color: red;
}
#msg {
font-size: 12px;
line-height: 22px;
}
</style>
</head>
<body>
<div class="main">
<table class="main-table">
<tr>
<td colspan="2" style=" text-align: center;font-weight: bold;">WebSocket测试</td>
</tr>
<tr>
<td style="width: 100px;" class="td-left">服务器地址</td>
<td><input type="text" id="server" value="ws://localhost:8080/ws/"></td>
</tr>
<tr>
<td class="td-left">客户端名称</td>
<td><input type="text" id="clientId">
<input type="button" value="随机生成" onclick="GenerateClientId()" />
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="连接" onclick="ConnectServer()" />
</td>
</tr>
<tr>
<td class="td-left">连接状态</td>
<td> <span id="status"><span class='red'>未连接</span></span></td>
</tr>
<tr>
<td class="td-left">发送消息</td>
<td>
<input type="text" id="txt">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="发送" onclick="SendMsg()" />
<input type="button" value="清空" onclick="ClearLog()" />
</td>
</tr>
<tr>
<td class="td-left">日志</td>
<td>
<div id="msg"></div>
</td>
</tr>
</table>
<script type="text/javascript">
var websocket = null;
var clientId = "";
//随机生成客户端编号
function GenerateClientId() {
clientId = Math.random().toString().substr(2);
document.getElementById("clientId").value = clientId;
}
GenerateClientId();
//连接到服务器
function ConnectServer() {
var clientId = document.getElementById("clientId").value;
if (clientId == "") {
alert("客户端编号不能为空!");
} else {
if ("WebSocket" in window) {
websocket = new WebSocket("ws://localhost:8080/ws/" + clientId);
websocket.onerror = function () {
ShowMsg("<span class='red'>ERROR</span>");
}
websocket.onopen = function () {
document.getElementById("status").innerHTML = "<span class='green'>已连接</span>";
ShowMsg("<span class='green'>连接成功！</span>");
}
websocket.onmessage = function (event) {
ShowMsg(event.data);
}
websocket.onclose = function () {
ShowMsg("<span class='red'>断开连接</span>");
}
}
else {
alert("NOT SUPPORT WEBSOCKET!");
}
}
}
//网页关闭时，断开链接
window.onbeforeunload = function () {
websocket.close();
}
//显示日志
function ShowMsg(msg) {
document.getElementById("msg").innerHTML += Now() + " " + msg + "<br/>";
}
//发送消息
function SendMsg() {
var txt = document.getElementById("txt").value;
websocket.send(txt);
ShowMsg("<span class='green'>发送消息：" + txt + "</span>");
}
//断开链接
function closeWebSocket() {
websocket.close();
}
function Now() {
const date = new Date();
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hour = date.getHours().toString().padStart(2, '0');
const minute = date.getMinutes().toString().padStart(2, '0');
const second = date.getSeconds().toString().padStart(2, '0');
const format = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
return format;
}
//清空日志
function ClearLog() {
document.getElementById("msg").innerHTML = "";
}
</script>
</div>
</body>
</html>运行效果：
注意：
如果使用了Nginx转发请求的，需在Nginx配置WebSocket的转发规则。
到此这篇关于SpringBoot 使用WebSocket功能的文章就介绍到这了,更多相关SpringBoot 使用WebSocket内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！