使用websocket讓服務器端給客戶端推數據
1 背景
最近對websocket比較感興趣，一直在想http都是客戶端向服務端主動發請求，然後進行數據交互。但是如何讓服務器端主動向客戶端發送數據或者推送事件呢？
很神奇，比較好奇，帶着這樣的疑問，就來簡單瞭解下websocket。
準備分三步學習：
- 快速使用springboot搭建一個dome，先感受websocket的神奇
- 做一個1對1（好友聊天），1對多（羣聊）的demo
- 分析源碼
本篇文章做第一步，使用springboot搭建一個dome
2 搭建dome
2.0 項目結構
2.1 創建一個springboot項目
- 例如：我創建了一個名爲websocket的項目；包名爲com.wllfengshu
2.2 添加maven依賴
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.wllfengshu</groupId>
<artifactId>websocket</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>websocket</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<!--添加websocket依賴-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
2.3 開啓WebSocket支持
package com.wllfengshu.websocket.configs;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* 開啓WebSocket支持
* @author
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
2.4 消息推送
- 有兩種辦法，一是：直接把ServerEndpoint當作一個控制器，加上一個@RestController註解即可；二是：把ServerEndpoint當作一個組件，加上一個@Component註解，然後在業務層調用。具體的可以看參考文獻，他們都寫的很好。（至於使用攔截器的方式太麻煩，暫不研究）
- 本文列舉第一種，後期的“聊天”功能也基於第一種方法
package com.wllfengshu.websocket.rest;
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.PathParam;
import javax.websocket.server.ServerEndpoint;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RestController;
//這裏的/webSocket/{id}/{name}只是攔截的url，不一定要是這個，你寫/aaa也是行的
@ServerEndpoint("/webSocket/{id}/{name}")
@RestController
public class TestWebSocket {
/**
* 用來記錄當前連接數的變量
*/
private static volatile int onlineCount = 0;
/**
* concurrent包的線程安全Set，用來存放每個客戶端對應的WebSocket對象
*/
private static CopyOnWriteArraySet<TestWebSocket> webSocketSet = new CopyOnWriteArraySet<>();
/**
* 與某個客戶端的連接會話，需要通過它來與客戶端進行數據收發
*/
private Session session;
private static final Logger logger = LoggerFactory.getLogger(TestWebSocket.class);
@OnOpen
public void onOpen(Session session, @PathParam("id") long id, @PathParam("name") String name) throws Exception {
this.session = session;
System.out.println(this.session.getId());
webSocketSet.add(this);
logger.info("Open a websocket. id={}, name={}", id, name);
}
@OnClose
public void onClose() {
webSocketSet.remove(this);
logger.info("Close a websocket. ");
}
@OnMessage
public void onMessage(String message, Session session) {
logger.info("Receive a message from client: " + message);
try {
//接受到客戶端信息後，立即回覆“我是服務器，收到數據了”
sendMessage("我是服務器，收到數據了");
}catch (Exception e){
logger.error("Error sendMessage. ", e);
}
}
@OnError
public void onError(Session session, Throwable error) {
logger.error("Error while websocket. ", error);
}
// 發送消息
public void sendMessage(String message) throws Exception {
if (this.session.isOpen()) {
this.session.getBasicRemote().sendText(message);
}
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
TestWebSocket.onlineCount++;
}
public static synchronized void subOnlineCount() {
TestWebSocket.onlineCount--;
}
}
2.5 前端發起socket連接請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<title>Java後端WebSocket實現</title>
</head>
<body>
信息框:<input id="text" type="text"/>
<button onclick="send()">發送</button>
<hr/>
<button onclick="closeWebSocket()">關閉WebSocket連接</button>
<hr/>
收到的信息如下:</br>
<div id="message">
</div>
</body>
<script type="text/javascript">
if(typeof(WebSocket) == "undefined") {
alert("您的瀏覽器不支持WebSocket");
}
var webSocket = new WebSocket("ws://127.0.0.1:8080/webSocket/1/liang");
//連接發生錯誤的回調方法
webSocket.onerror = function () {
setMessageInnerHTML("WebSocket連接發生錯誤");
};
//連接成功建立的回調方法
webSocket.onopen = function () {
setMessageInnerHTML("WebSocket連接成功");
}
//接收到消息的回調方法
webSocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//連接關閉的回調方法
webSocket.onclose = function () {
setMessageInnerHTML("WebSocket連接關閉");
}
//監聽窗口關閉事件，當窗口關閉時，主動去關閉webSocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
window.onbeforeunload = function () {
closeWebSocket();
}
//關閉WebSocket連接
function closeWebSocket() {
webSocket.close();
}
//發送消息
function send() {
var message = $('#text').val();
webSocket.send(message);
$("#text").val("");
}
//將消息顯示在網頁上
var val = "";
function setMessageInnerHTML(innerHTML) {
var temp = '<br/>' + innerHTML + '<br/>';
val = val + temp;
$("#message").html(val);
}
</script>
</html>
2.6 原理圖
參考：
[1] https://www.cnblogs.com/strugglion/p/10021173.html
[2] https://blog.csdn.net/moshowgame/article/details/80275084