WebSocket
大约 2 分钟javaspring
依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
配置类
package com.xdf.showa.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Bean;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* @author chanchaw
* @create 2023-05-12 23:13
*/
@Configuration
public class WebSocketConfiguration {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
模型类 - WebSocketMsg
package com.xdf.showa.model;
import lombok.Data;
/**
* @author chanchaw
* @create 2023-05-12 23:12
*/
@Data
public class WebSocketMsg {
private String userSid;
private String msg;
}
前后端交互用控制器
package com.xdf.showa.config;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.atomic.AtomicInteger;
/**
* @author chanchaw
* @create 2023-05-12 23:16
*/
@Slf4j//日志
@ServerEndpoint(value = "/frontEndWebSocket")//前端通过此URL和后端交互，建立连接
@Component
public class FrontEndWebSocketController {
private static AtomicInteger onlineCount = new AtomicInteger(0);
//成功建立连接时
@OnOpen
public void onOpen(Session session) {
//在线人数加1
onlineCount.incrementAndGet();
//将连接信息放入客户端
log.info("新用户{}加入，当前在线人数为：{}", session.getId(), onlineCount.get());
}
//关闭连接时
@OnClose
public void onClose(Session session) {
//在线人数减1
onlineCount.decrementAndGet();
log.info("用户{}退出，当前在线人数为：{}", session.getId(), onlineCount.get());
}
//客户端发送过来的消息
@OnMessage
public void onMessage(String message, Session session) {
log.info("服务端收到客户端[{}]的消息:{}", session.getId(), message);
//给客户端回消息
this.sendMessage("Hello, " + message, session);
}
//发生错误时
@OnError
public void onError(Session session, Throwable error) {
log.error("----------------发生错误----------------");
error.printStackTrace();
}
//回消息
public void sendMessage(String message, Session toSession) {
try {
log.info("服务端给客户端[{}]发送消息，内容：{}", toSession.getId(), message);
toSession.getBasicRemote().sendText(message);
} catch (Exception e) {
log.error("----------------发生错误----------------", e);
}
}
}
前端代码
<!DOCTYPE HTML>
<html>
<head>
<title>My WebSocket</title>
</head>
<body>
<input id="text" type="text"/>
<button onclick="send()">Send</button>
<button onclick="close()">Close</button>
<div id="message"></div>
</body>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://localhost:7076/showabe/frontEndWebSocket");//此处地址在分情况测试的时候需要修改
} else {
alert('Not support websocket！！！')
}
//发生错误时
websocket.onerror = function () {
setMessageInnerHTML("error");
};
//成功建立连接时
websocket.onopen = function (event) {
setMessageInnerHTML("open");
//console.log('成功建立了 WebSocket 连接');
//console.log(event);
}
//接收到消息时
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//关闭连接时
websocket.onclose = function () {
setMessageInnerHTML("close");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
websocket.close();
}
//显示服务器端返回的消息
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//关闭连接按钮
function close() {
websocket.close();
}
//发送消息按钮
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>
源码
见 showa 项目，后端控制器是 FrontEndWebSocketController.java
注意
不可将该控制器放在 AOP 控制的包内