SpringBoot整合WebSocket做一个自说自话的dem
2019-10-10 本文已影响0人
程就人生
最近使用SpringBoot集成WebSocket做了一个极简的项目，主要应对服务器主动向客户端推送消息这种应用场景，而且要保证消息的实时性，有一对一，也有一对多的场景。先记录一下SpringBoot是如何集成WebSocket的吧，来一个极简的demo，简单到自己接收自己发送的信息。
demo搭建环境说明：
SpringBoot 2.1.4
thmeleaf
WebSocket
首先，需要在pom中导入必须的架包；
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- springboot和websocket的集成 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
第二步，添加WebSocket的配置文件；
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* websocket配置文件配置
* @author 程就人生
* @date 2019年9月23日
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
第三步，WebSocket服务端功能的开启，信息的接收、发送、关闭；
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
/**
* websocket聊天信息的接收处理，最简单的demo
* @author 程就人生
* @date 2019年9月24日
* @Description
*
*/
@ServerEndpoint("/websocket1")
@Component
public class WebSocketServer1 {
private static Logger log = LoggerFactory.getLogger(WebSocketServer1.class);
//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
private static CopyOnWriteArraySet<WebSocketServer1> webSocketSet = new CopyOnWriteArraySet<WebSocketServer1>();
/**
* 连接建立成功调用的方法
*/
@OnOpen
public void onOpen(Session session) {
//加入set中
webSocketSet.add(this);
log.info("有新连接加入！当前在线人数为" + webSocketSet.size());
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
//从set中删除
webSocketSet.remove(this);
log.info("有一连接关闭！当前在线人数为" + webSocketSet.size());
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
* @param session
*/
@OnMessage
public void onMessage(String message, Session session) {
log.info("来自客户端的消息:" + message);
try {
//接收到的消息再发给自己
session.getBasicRemote().sendText(message);
}catch(Exception e){
e.printStackTrace();
}
}
/**
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("发生错误");
error.printStackTrace();
}
}
第四步，建立一个简单的客户端页面，建立与websocket连接，并收发信息；
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<p>最简单的一个demo,自己发自己接收</p>
<p><input type="text" id="txt" ></input><button id="button" >发送消息</button></p>
<p id="recvContent">
</p>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script th:inline="javascript" >
<!-- ws客户端 start -->
var socket;
if(typeof(WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket");
}else{
console.log("您的浏览器支持WebSocket");
socket = new WebSocket("ws://localhost:8080/websocket1");
//打开事件
socket.onopen = function() {
console.log("Socket 已打开");
};
//获得消息事件
socket.onmessage = function(msg) {
console.log("onmessage:" + msg.data);
$("#recvContent").append('<div style="width:300px;text-align:left;"><span >' + msg.data + '</span></div><br/>');
}
//关闭事件
socket.onclose = function() {
console.log("Socket已关闭");
};
//发生了错误事件
socket.onerror = function() {
alert("Socket发生了错误");
};
window.onbeforeunload = function(){
socket.close();
return '';
};
}
//按钮绑定事件
$("#button").click(function(){
//发送消息
var value=$("#txt").val();
$("#txt").val("");
socket.send(value);
});
</script>
</body>
</html>
最后，测试。
测试结果图
总结
这就是websocket最最简单的应用，代码少到到不能再少了，如果要做一对一、一对多的聊天也可以在这上面进行扩展。
