使用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