首先需要了解一下背景，什么是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. Laravel框架内实现api文档:markdown转为html

    前后端分离的工作模式于今是非常流行了,前后端工作的对接,就离开不了API文档的辅助. 根据自己以往的工作经历,以及了解的一些资讯,API文档的建立,无非以下几种方式: 1. word文档模板 2. 第 ...

  2. Java Selenium (十二) 操作弹出窗口 & 智能等待页面加载完成 & 处理 Iframe 中的元素

    一.操作弹出窗口   原理 在代码里, 通过 Set<String> allWindowsId = driver.getWindowHandles(); 来获取到所有弹出浏览器的句柄, 然 ...

  3. 开发者工具conloseLog的使用

  4. ASP.NET Core Basic 1-1 WebHost与项目配置

    .NET Core ASP.NET Core Basic 1-1 本节内容为WebHost与项目配置 项目配置文件 我们可以很清楚的发现在我们的文件中含有一个Json文件--appsettings.j ...

  5. socket-遇到一枚假程序员

    1. 一脸懵比 今天又偶然看到socket,对socket有点简单的概念,知道是网络编程.客户端与服务端通信等,但是不是太了解,就随便搜了下,几千万条记录,随便点开看了几页,socket跟网络编程也是 ...

  6. MySQL之Xtrabackup的使用

    一.Xtrabackup介绍 XtraBackup(PXB) 工具是 Percona 公司用 perl 语言开发的一个用于 MySQL 数据库物理热备的备份工具,支持 MySQl(Oracle).Pe ...

  7. 单选多选（CocosCreator）

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321 1.前沿       首先来说说我们的需求吧:随机出现单选题或者多选题,完全回答正确才算正确(多选题中少选错选算错),核实答案的 ...

  8. [目录] ASP.Net Core 搭建微服务网站

    本项目采用ASP.Net Core微服务技术,搭建博客和Saas平台. 全文将围绕(1)设计模式  (2)敏捷开发 目的: 结构足够合理,代码足够优美,扩展性.可读性.易维护性做到最优. 以下目录仅为 ...

  9. 🕸捕获与改写HTTPS请求

    前言 本文站在 macOS 用户的角度下,分享一下对 HTTPS 进行请求拦截.对响应进行修改的经验. 要注意的是,本文介绍的工具虽然一定程度上对 Windows 用户也适用 ,但并非所有工具都是免费 ...

  10. FastDFS初印象

    是什么?         FastDFS是一个轻量级分布式文件系统. 能干嘛?         对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等. 相关概念        ...