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>