首先需要了解一下背景，什么是WebSocket以及为什么要用WebSocket。

在常见的Web应用中，客户端与服务器通信，都是通过HTTP协议进行通信，客户端一次请求，服务端一次响应。而WebSocket使得客户端与服务端可以直接构建起一条TCP的通道。这里附上一段百度百科的文字说明：WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

当客户端有需要向后台实时请求最新数据的情景下（实际上应该是服务端侦知到数据发生变更主动推送给客户端），目前一般是使用AJAX来进行一个定时的轮询，而使用WebSocket即可很好的适配该种需求场景。两种方式的对比可见下图：

相关背景就说到这里，下面结合代码进行实战。

首先在Spring Boot工程的pom文件中添加相关依赖。

<dependency>

  <groupId>org.springframework.boot</groupId>

  <artifactId>spring-boot-starter-websocket</artifactId>

</dependency>

接下来先实现一个WebSocket类，并通过注解@ServerEndpoint指定在服务器上发布的URI供客户端连接时填写。

import java.io.IOException;

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.ServerEndpoint;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.web.bind.annotation.RestController;

@ServerEndpoint("/testWebSocket")

@RestController

public class TestWebSocket {

    // 用来记录当前连接数的变量

    private static volatile int onlineCount = 0;

    // concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象

    private static CopyOnWriteArraySet<TestWebSocket> webSocketSet = new CopyOnWriteArraySet<TestWebSocket>();

    // 与某个客户端的连接会话，需要通过它来与客户端进行数据收发

    private Session session;

    private static final Logger LOGGER = LoggerFactory.getLogger(TestWebSocket.class);

    @OnOpen

    public void onOpen(Session session) throws Exception {

        this.session = session;

        System.out.println(this.session.getId());

        webSocketSet.add(this);

        LOGGER.info("Open a websocket.");

    }

    @OnClose

    public void onClose() {

        webSocketSet.remove(this);

        LOGGER.info("Close a websocket. ");

    }

    @OnMessage

    public void onMessage(String message, Session session) throws IOException, InterruptedException {

        LOGGER.info("Receive a message from client: " + message);

        for (int i = 0; i < 10; i ++) {

            session.getBasicRemote().sendText(String.valueOf(i));

            Thread.sleep(1000);

        }

    }

    @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("Send a message from server. ");

        }

    }

    public static synchronized int getOnlineCount() {

        return onlineCount;

    }

    public static synchronized void addOnlineCount() {

        TestWebSocket.onlineCount++;

    }

    public static synchronized void subOnlineCount() {

        TestWebSocket.onlineCount--;

    }

}

对应前端页面websocket.html内容如下方所示。

<html>

<body>

    <input id="text" type="text"/>

    <button onclick="send()">发送消息</button>

    <hr/>

    <div id="message"></div>

</body>

<script type="text/javascript">

    var websocket = null;

    //判断当前浏览器是否支持WebSocket

    if ('WebSocket' in window) {

        websocket = new WebSocket("ws://localhost:8080/testWebSocket");

    }

    else {

        alert('当前浏览器 不支持WebSocket')

    }

    //连接发生错误的回调方法

    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();

    }

    //将消息显示在网页上

    function setMessageInnerHTML(innerHTML) {

        document.getElementById('message').innerHTML += innerHTML + '<br/>';

    }

    //关闭WebSocket连接

    function closeWebSocket() {

        websocket.close();

    }

    //发送消息

    function send() {

        var message = document.getElementById('text').value;

        websocket.send(message);

    }

</script>

</html>

同时在控制层中增加对新增页面的定向。

@RequestMapping("/websocket")

public String websocket() {

    return "websocket";

}

这时启动项目并通过http://localhost:8080/websocket访问，出现如下报错。

原因是未将WebSocket添加到Spring的容器中。

@Configuration

public class WebSocketConfig {

    @Bean

    public ServerEndpointExporter serverEndpointExporter() {

        return new ServerEndpointExporter();

    }

}

网上有资料提到，该类必须与项目入口或者说启动类在同一个子包下，不然可能会出现注入失败的问题。我这里倒没有遇到，也没办法复现，该问题也就不继续深究。

验证成功！

参考资料：

https://www.runoob.com/html/html5-websocket.html

https://www.cnblogs.com/strugglion/p/10021173.html

Spring Boot + WebSocket 学习笔记的更多相关文章

  1. Spring BOOT的学习笔记

    1,静态文件夹src/main/resources/static下的,图片必须放在images文件夹下才能访问,直接放在static下不能访问 2,配置热部署,否则修改下Html,图片都得重启 htt ...

  2. Spring boot + jdbc学习笔记

    pom.xml: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www. ...

  3. Spring boot ----RestTemplate学习笔记

    ****spring boot-----restTemplate 封装了HttpURLConnection,HttpClient,Netty等接口访问实现库 restTemplet包含以下部分 Htt ...

  4. Spring Boot WebSocket从入门到放弃

    在构建Spring boot项目时已经提供webSocket依赖的勾选.webSocket是TCP之上的一个非常薄的轻量级层 ,webSocket主要的应用场景离不开即时通讯与消息推送,但只要应用程序 ...

  5. spring cloud（学习笔记）高可用注册中心（Eureka）的实现（二）

    绪论 前几天我用一种方式实现了spring cloud的高可用,达到两个注册中心,详情见spring cloud(学习笔记)高可用注册中心(Eureka)的实现(一),今天我意外发现,注册中心可以无限 ...

  6. WebSocket学习笔记IE，IOS，Android等设备的兼容性问

    WebSocket学习笔记IE,IOS,Android等设备的兼容性问 一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏 ...

  7. WebSocket学习笔记——无痛入门

    WebSocket学习笔记——无痛入门 标签: websocket 2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报  分类: 物联网学习笔记(37)  版权声明:本文为博主原 ...

  8. 玩转spring boot——websocket

    前言 QQ这类即时通讯工具多数是以桌面应用的方式存在.在没有websocket出现之前,如果开发一个网页版的即时通讯应用,则需要定时刷新页面或定时调用ajax请求,这无疑会加大服务器的负载和增加了客户 ...

  9. spring boot websocket stomp 实现广播通信和一对一通信聊天

    一.前言 玩.net的时候,在asp.net下有一个叫 SignalR 的框架,可以在ASP .NET的Web项目中实现实时通信.刚接触java寻找相关替代品,发现 java 体系中有一套基于stom ...

随机推荐

  1. json模块和pickle模块

    json模块和pickle模块 一.json模块 作用:用python写了一个程序,用java写了一门程序,这两个程序需要数据之间交流,就产生了一种多种语言通用的数据类型,json串. 序列化:把对象 ...

  2. 由于Microsoft\VisualStudio\14.0\Designer\ShadowCache导致的一个异常问题

    本文引用了一个DynamicDataDisplay和DynamicControl两个类库,本来使用的时候都时正常的,愉快的运行着. DynamicDataDisplay:这是一个用于动态数据可视化的W ...

  3. iNeuOS 物联网云操作系统2.0发布，集成设备容器、视图建模、机器学习三大模块

    目       录 1.      概述... 2 2.      使命及目标... 3 3.      系统框架... 4 4.      设备容器(iNeuKernel)... 4 5.      ...

  4. 整数 布尔值 字符串 for循环

    整型和布尔值的转换 整型---数字(int) 用于比较和运算 32位范围 -2** 31到2 **32-1 64位范围-2** 63到2** 63-1 十进制转二进制计算方法: 15的二进制为 15% ...

  5. Java深层复制方式

    为什么需要深层复制 Object 的 clone() 方法是浅层复制(但是 native 很高效).另外,Java 提供了数组和集合的复制方法,分别是 Arrays.copy() 和 Collecti ...

  6. [Error] - Windows卸载程序时，提示错误2503

    1. 打开“任务管理器” 2. 切换到“详细信息”标签页,找到explorer.exe文件,并结束它. 3. 点击“任务管理器”上的文件->运行新任务,输入explorer.ext,勾选“以系统 ...

  7. [python]创建文本文件，并读取

    代码如下: # coding=gbk import os fname = raw_input("Please input the file name: ") print if os ...

  8. Codeforces 369 C Valera and Elections

    Valera and Elections 题意:现在有n个候选人, 有n-1条路, 如果选择了这个候选人, 这个候选人就会将从自己这个城市到1号城市上所有坏的路都修复一下,现在求最小的候选人数目, 如 ...

  9. 模板汇总——快读 fread

    struct FastIO { ; int wpos; char wbuf[S]; FastIO() : wpos() { } inline int xchar() { static char buf ...

  10. yzoj 1201数字三角形3题解

    题意 如下图所示为一个数字三角形: 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 请编程计算从顶至底部某处的一条路径,使该路径所经过的数字的总和最大.约定: (1)每一步可沿直线向下或右 ...