WebSocket 在 SpringBoot 中的使用

介绍

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

WebSocket协议

WebSocket并不是全新的协议，而是利用了HTTP协议来建立连接。我们来看看WebSocket连接是如何创建的。

首先，WebSocket连接必须由浏览器发起，因为请求协议是一个标准的HTTP请求，格式如下：

GET ws://localhost:3000/ws/chat HTTP/1.1
Host: localhost
Upgrade: websocket
Connection: Upgrade
Origin: http://localhost:3000
Sec-WebSocket-Key: client-random-string
Sec-WebSocket-Version: 13

该请求和普通的HTTP请求有几点不同：

  1. GET请求的地址不是类似/path/，而是以ws://开头的地址；
  2. 请求头Upgrade: websocket和Connection: Upgrade表示这个连接将要被转换为WebSocket连接；
  3. Sec-WebSocket-Key是用于标识这个连接，并非用于加密数据；
  4. Sec-WebSocket-Version指定了WebSocket的协议版本。

随后，服务器如果接受该请求，就会返回如下响应：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: server-random-string

该响应代码101表示本次连接的 HTTP 协议即将被更改，更改后的协议就是Upgrade: websocket指定的WebSocket协议。

版本号和子协议规定了双方能理解的数据格式，以及是否支持压缩等等。如果仅使用WebSocket的API，就不需要关心这些。

现在，一个WebSocket连接就建立成功，浏览器和服务器就可以随时主动发送消息给对方。消息有两种，一种是文本，一种是二进制数据。通常，我们可以发送JSON格式的文本，这样，在浏览器处理起来就十分容易。

为什么 WebSocket 连接可以实现全双工通信而HTTP连接不行呢？实际上 HTTP 协议是建立在 TCP 协议之上的，TCP 协议本身就实现了全双工通信，但是 HTTP 协议的请求－应答机制限制了全双工通信。WebSocket 连接建立以后，其实只是简单规定了一下：接下来，咱们通信就不使用HTTP协议了，直接互相发数据吧。

安全的WebSocket连接机制和HTTPS类似。首先，浏览器用wss://xxx创建WebSocket连接时，会先通过HTTPS创建安全的连接，然后，该 HTTPS 连接升级为 WebSocket 连接，底层通信走的仍然是安全的 SSL/TLS 协议。

浏览器

很显然，要支持WebSocket通信，浏览器得支持这个协议，这样才能发出ws://xxx的请求。目前，支持WebSocket的主流浏览器如下：

  • Chrome
  • Firefox
  • IE >= 10
  • Sarafi >= 6
  • Android >= 4.4
  • iOS >= 8

SpringBoot 中 WebSocket 的使用

加入 maven 依赖

SpringBoot 2.0 之后，直接导此包即可：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <version>1.5.10.RELEASE</version>
</dependency>

WebSocketConfig

开启 websocket 支持，如果是使用独立的 servlet 容器（如tomcat），则不需要注入 ServerEndpointExporter

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * 开启 websocket 支持<br>
 *     配置WebSocketEndpointServer
 *     如果使用独立的servlet容器，不是使用SpringBoot的内置容器
 *     不需要注入ServerEndpointExporter, 它将由容器自己提供和管理
 * @author zhangchuanqiang
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

WebSocketServer

websocket 服务器，相当于一个ws协议的 Controller

import lombok.extern.java.Log;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * @Description: WebSocketServer
 * @Author: zcq
 * @Date: 2019-06-14 14:37
 */
@Log
@Component
@ServerEndpoint("/index/{sid}")  //该注解表示该类被声明为一个webSocket终端
public class MySocket {
    /**
     * 初始在线人数
     */
    private static AtomicInteger online_num = new AtomicInteger(0);
    /**
     * 线程安全的socket集合，存储在线用户实例
     */
    private static CopyOnWriteArraySet<MySocket> webSocketSet = new CopyOnWriteArraySet<MySocket>();
    /**
     * 当前会话
     */
    private Session session;

    /**
     * 接收用户id
     */
    private String sid = "";

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("sid") String sid) {
        this.sid = sid;
        this.session = session;
        webSocketSet.add(this);
        // 在线人数+1
        addOnlineCount();
        log.info("有链接加入，当前人数为:" + getOnline_num());
        sendMessageBasic("有链接加入，当前人数为:" + getOnline_num());
    }

    /**
     * 连接关闭调用的方法
     */
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);
        subOnlineCount(); //在线数减1
        log.info("有一连接关闭！当前在线人数为" + getOnline_num());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message
     * @param session
     * @throws IOException
     */
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        log.info("来自客户端的消息:" + message);
        for (MySocket item : webSocketSet) {
            item.sendMessageBasic(message);
        }
    }

    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.info("发生错误");
        error.printStackTrace();
    }

    /**
     * 实现服务器主动推送
     */
    public void sendMessageBasic(String message) {
        try {
            this.session.getBasicRemote().sendText(message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 实现服务器主动推送
     */
    public void sendMessageAsync(String message) {
        this.session.getAsyncRemote().sendText(message);
    }

    /**
     * 群发自定义消息
     */
    public static void sendInfo(String message, @PathParam("sid") String sid) throws IOException {
        log.info("推送消息到窗口" + sid + "，推送内容:" + message);
        for (MySocket item : webSocketSet) {
            //这里可以设定只推送给这个sid的，为null则全部推送
            if (sid == null || "all".equals(sid)) {
                item.sendMessageBasic(message);
            } else if (item.sid.equals(sid)) {
                item.sendMessageBasic(message);
            }
        }
    }

    public static MySocket getWebSocket(String sid) {
        if (webSocketSet == null || webSocketSet.size() <= 0) {
            return null;
        }
        for (MySocket item : webSocketSet) {
            if (sid.equals(item.sid)) {
                return item;
            }
        }
        return null;
    }

    public AtomicInteger getOnline_num() {
        return MySocket.online_num;
    }

    public int subOnlineCount() {
        return MySocket.online_num.addAndGet(-1);
    }

    public int addOnlineCount() {
        return MySocket.online_num.addAndGet(1);
    }
}

推送消息

/**
 * @Description: 页面请求
 * @Author: zcq
 * @Date: 2019-06-14 14:35
 */
@GetMapping("/socket/{cid}")
public ModelAndView socket(@PathVariable String cid) {
    ModelAndView mav = new ModelAndView("/index1");
    mav.addObject("cid", cid);
    return mav;
}

/**
 * @Description: 推送数据接口
 * @Author: zcq
 * @Date: 2019-06-14 14:35
 * @param cid 为 all 时，为推送全部
 */
@ResponseBody
@RequestMapping("/socket/push/{cid}")
public Result pushToWeb(@PathVariable String cid, String message) {
    try {
        MySocket.sendInfo(message, cid);
    } catch (IOException e) {
        e.printStackTrace();
        return Result.error();
    }
    return Result.success(cid);
}

页面发起 socket 请求

协议是 ws 或者 wss，可以封装了一些 basePath 的路径类，可以replace(“http”,“ws”)来替换协议。

<html>
<head>
    <meta charset="utf-8">
    <title>My WebSocket</title>
</head>

<body>
Welcome<br/>
<input id="text" type="text"/>
<button onclick="send()">Send</button>
<button onclick="closeWebSocket()">Close</button>
<div id="message">
</div>
</body>

<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        // Websocket 使用 ws 或 wss 的统一资源标志符，类似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。
        // onlinenum = new WebSocket("ws://localhost:8086/websocket/20");
        onlinenum = new WebSocket("http://localhost:8086/websocket/${cid}".replace("http", "ws").replace("https", "ws"));
    } else {
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    onlinenum.onerror = function () {
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    onlinenum.onopen = function (event) {
        setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    onlinenum.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    onlinenum.onclose = function () {
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        onlinenum.close();
    };

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket() {
        onlinenum.close();
    }

    //发送消息
    function send() {
        const message = document.getElementById('text').value;
        onlinenum.send(message);
    }
</script>
</html>

问题补充：

  • 如果希望打成WAR包，部署到TOMCAT中。需要使启动类继承：SpringBootServletInitializer，并加入方法：
/** 
* 用于支持打包成 WAR，部署到 tomcat 中
*/ 
@Override 
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) { 
    return builder.sources(AssetApplication.class); 
}
  • 如果打成WAR包后，在TOMCAT中启动时报错：Multiple Endpoints may not be deployed to the same path 注释掉 WebSocketServer 类上的 @Component 注解。

资料

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,772评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,458评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,610评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,640评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,657评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,590评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,962评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,631评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,870评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,386评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,969评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2赞 342

推荐阅读更多精彩内容

  • WebSocket的理解
    原文地址：http://www.ibm.com/developerworks/cn/java/j-lo-WebSo...
    敢梦敢当阅读 8,876评论 0赞 50
  • WebSocket：5分钟从入门到精通
    一、内容概览 WebSocket的出现，使得浏览器具备了实时双向通信的能力。本文由浅入深，介绍了WebSocket...
    Calvin李阅读 2,496评论 2赞 10
  • springboot 中websocket的使用
    一.WebSocket简单介绍 随着互联网的发展，传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来...
    谁在烽烟彼岸阅读 2,918评论 1赞 5
  • L小姐来访
    “你像梦一场，啊，梦一场。夜色深沉中不见你模样。” 我常常说L小姐是场梦，因为她好似只存在于我和仪宝模糊不清的记忆...
    胡未知阅读 273评论 0赞 1
  • 读书不成长？这里有妙招
    朋友小佳在网上聊天，同我诉说自己的苦恼。 自从我自考拿到大专毕业证书，当了一学期小学老师后，她深深意识到只有学习才...
    佳丹123阅读 445评论 5赞 2