首先需要了解一下背景，什么是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. springboot 项目的https的发布

    1.生成密钥证书 生成命令: keytool -genkey -alias tomcat -storetype PKCS12 -keyalg RSA -keysize -keystore keysto ...

  2. 从无到有构建vue实战项目（七）

    十四.Vuex的使用 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vu ...

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

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

  4. Leetcode之二分法专题-704. 二分查找（Binary Search）

    Leetcode之二分法专题-704. 二分查找(Binary Search) 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target  ,写一个函数搜索 nums 中的 t ...

  5. Win10下安装python3.x+pycharm+autopep8

    一.安装Python3.X 1.Pythong官方网站:http://python.org/getit/   下载windows的安装包.有以下几个选项: 这里选择windows x86-64 exc ...

  6. JavaScript get set方法 ES5/ES6写法

    网上鲜有get和set的方法的实例,在这边再mark一下. get和set我个人理解本身只是一个语法糖,它定义的属性相当于“存储器属性” 为内部属性提供了一个方便习惯的读/写方式 ES5写法 func ...

  7. 同步vmware虚拟机和主机的时间

    1. 打开虚拟机->设置 2. 选择选项标签页,选中VMware Tools,勾选“将客户机时间与主机同步”

  8. 【转 | 侵删】2D 绘图技术中的坐标系统与坐标变换

    本文介绍在 2D 绘图技术中的坐标系统和坐标变换的相关知识.同时介绍 Kity 在这方面提供的 API .希望这些知识对于需要进行图形应用开发的同学会有所帮助. 锤子的故事 很久以前,有一个画家,他很 ...

  9. Atcode B - Colorful Hats（思维）

    题目链接:http://agc016.contest.atcoder.jp/tasks/agc016_b 题解:挺有意思的题目主要还是模拟出最多有几种不可能的情况,要知道ai的差距不能超过1这个想想就 ...

  10. poj 2253 Frogger（floyd变形）

    题目链接:http://poj.org/problem?id=1797 题意:给出两只青蛙的坐标A.B,和其他的n-2个坐标,任一两个坐标点间都是双向连通的.显然从A到B存在至少一条的通路,每一条通路 ...