WebSocket在Spring Boot中的使用
前言
“WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。”
——《菜鸟教程》
简而言之，WebSocket是实现服务端主动向客户端推送数据的一项技术，它使用ws协议实现。
它的实现过程是这样的：客户端首先发起一个ws请求，这个请求最好能包含一个id（服务器将根据这个id将数据推送至客户端），当请求成功后，客户端将和服务端建立起一个通道，客户端可通过此通道像服务端发送数据，服务端同样可以根据id向该客户端下发数据。
在Spring Boot中实现WebSocket功能还是比较容易的，具体过程如下：
1.首先在pom文件中引入相关依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>2.开启Spring Boot对websocket的支持
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}3.编写websocket业务处理类
@Slf4j
@ServerEndpoint("/websocket/{sid}")
@Component
public class WebSocketServer {
//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
//接收sid
private String sid="";
/**
* 连接建立成功调用的方法*/
@OnOpen
public void onOpen(Session session,@PathParam("sid") String sid) {
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在线数加1
log.info("有新窗口开始监听:"+sid+",当前在线人数为" + getOnlineCount());
this.sid=sid;
try {
sendMessage(1,"连接成功");
} catch (IOException e) {
log.error("websocket IO异常");
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this); //从set中删除
subOnlineCount(); //在线数减1
log.info("有一连接关闭！当前在线人数为" + getOnlineCount());
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息*/
@OnMessage
public void onMessage(String message, Session session) {
log.info("收到来自窗口"+sid+"的信息:"+message);
//群发消息
for (WebSocketServer item : webSocketSet) {
try {
item.sendMessage(1,message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
@OnError
public void onError(Session session, Throwable error) {
log.error("发生错误");
error.printStackTrace();
}
/**
* 实现服务器主动推送
*/
public void sendMessage(int code,String message) throws IOException {
JSONObject messageResult = new JSONObject();
messageResult.put("code",code);
messageResult.put("message",message);
this.session.getBasicRemote().sendText(messageResult.toString());
}
/**
* 群发自定义消息
* */
public static void sendInfo(int code,String message,@PathParam("sid") String sid) throws IOException {
log.info("推送消息到窗口"+sid+"，推送内容:"+message);
for (WebSocketServer item : webSocketSet) {
try {
//这里可以设定只推送给这个sid的，为null则全部推送
if(sid==null) {
item.sendMessage(code,message);
}else if(item.sid.equals(sid)){
item.sendMessage(code,message);
}
} catch (IOException e) {
continue;
}
}
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocketServer.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocketServer.onlineCount--;
}
@Data
static class MessageResult{
private int code;
private String message;
}
}4.编写前端代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>websocket</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="sse">
<p>message:<input id="info"/><button onclick="sendMessage()">发送</button></p>
<textarea name="messagebox" id="messagebox" cols="30" rows="10">
</textarea>
</div>
</body>
<script type="text/javascript">
var ipaddr = "localhost:8091";
var userId = 1234;
var messageValue = "";
// 打开一个 web socket
var ws = new WebSocket("ws://" + ipaddr + "/websocket/" + userId);
function WebSocketTest() {
if ("WebSocket" in window){
// alert("您的浏览器支持 WebSocket!");
ws.onmessage = function (evt){
var received_msg = $.parseJSON(evt.data);
console.log(received_msg);
console.log("code:" + received_msg.code);
console.log("message:" + received_msg.message);
messageValue = messageValue + "\n" +received_msg.message;
$("#messagebox").val(messageValue);
// alert("数据已接收...");
};
ws.onclose = function(){
// 关闭 websocket
alert("连接已关闭...");
};
}
else{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
WebSocketTest();
function sendMessage(){
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send($("#info").val());
console.log("数据发送中..." + $("#info").val());
}
</script>
</html>5.编写服务端控制器代码
@Api(description = "Websocket控制器")
@RestController
@RequestMapping("/messagecenter")
public class WebsocketController {
//页面请求
@GetMapping("/socket/{cid}")
public ModelAndView socket(@PathVariable String cid) {
ModelAndView mav=new ModelAndView("/socket");
mav.addObject("cid", cid);
return mav;
}
//推送数据接口
@ResponseBody
@GetMapping("/socket/push/{cid}")
public ServerResponse pushToWeb(@PathVariable String cid,String message) {
try {
WebSocketServer.sendInfo(200,message,cid);
} catch (IOException e) {
e.printStackTrace();
return ServerResponse.createByErrorMessage(cid+"#"+e.getMessage());
}
return ServerResponse.createBySuccess(cid);
}
}6.运行结果如图1-1所示
图1-1 websocket运行结果图
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-06-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读