SpringBoot +WebSocket应用

我们今天不研究原理,只看应用。

什么是WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

以上是百度百科的WebSocket定义。其实我们就可以理解WebSocket是一种全双工通讯协议,也就是服务端和客户端都可以发送、接收信息,对比Http协议想一下就很容易理解:Http协议是无状态的单向通讯协议,只能是客户端发送请求给服务端、服务端返回响应给客户端,之后连接就关闭了,服务端是不可以主动发送消息给客户端的。

应用场景

为什么需要WebSocket?

WebSocket是为了解决Web应用场景下特定需求的,Web应用使用的是http协议,服务端是没有办法主动发送消息给客户端的,但是某些场景下恰恰需要服务端主动发送消息给客户端,比如实时数据监控的场景:服务端定时(比如每分钟)获取到被监控设备的实时数据,前端页面实时展示监控值,当服务器端获取到新的数据的时候,要求前端页面相应的进行实时展示。

如果不采用WebSocket,一般会采用如下两种方式实现以上需求:

  1. 轮询:前端js定时轮询,发起查询请求,如果有新数据的话当然就可以获取到,但是即使没有新数据,前端也不会知道,只能机械式的不断轮询。
  2. 长轮询(long Polling):阻塞式轮询,拿不到数据就不返回一直等待,其实是一种更傻的轮询方式。

轮询方式是基于Http协议实现的,主要缺点是开销大,因为每次轮询都需要发起http请求。

而WebSocket是该应用场景下以上两种轮询方式的理想替代方案,WebSocket仅在首次与服务器通讯的时候采用http协议,建立链接之后立即升级协议为WebSocket协议,建立长连接,之后的通讯都会工作在这个长连接下,所以,可以极大减少及时通讯业务场景下的连接开销。

SpringBoot集成WebSocket

SpringBoot对WebSocket做了无缝支持,使用起来也非常方便。

第一步:引入依赖。

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

第二步:使用ServerEndpoint注解创建WebSocket服务端:

package com.example.service;

import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint(value = "/websocket")
@Component
public class MyWebSocket {

    //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();

    //与某个客户端的连接会话,需要通过它来给客户端发送数据
    private Session session;

    //记录客户端特性:比如页面查询参数等等
    private String params;
    private HashMap<String,String> frontEndData = new HashMap<>();

    /**
     * 连接建立成功调用的方法*/
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
        try {
            sendMessage(session.getId()+ ":connected...");
        } catch (IOException e) {
            System.out.println("IO异常");
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息*/
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);
        this.params = message;
        try{
            sendMessage(message);
        }catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 发生错误时调用
     **/
     @OnError
     public void onError(Session session, Throwable error) {
         System.out.println("发生错误");
         error.printStackTrace();
     }


     public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
         //this.session.getAsyncRemote().sendText(message);
         //群发消息
     }

    //给所有客户端发送消息
     public void sendMessageToAll(String message,MonitorService monitorService){
         for (MyWebSocket item : webSocketSet) {
             try {
                 if(monitorService.matchMessage(item.params,message))
                    item.sendMessage(message);
             } catch (IOException e) {
                 e.printStackTrace();
             }
         }
     }

     /**
      * 群发自定义消息
      * */
    public static void sendInfo(String message) throws IOException {
        for (MyWebSocket item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                continue;
            }
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        MyWebSocket.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        MyWebSocket.onlineCount--;
    }
}

第三部:创建一个MonitorService类,通过前台页面模拟设备数据提交给MonitorService,MonitorService接收到数据之后调用MyWebSocket 的sendMessageToAll方法,将设备监控数据发送给前端进行展示:

package com.example.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class MonitorService {
    @Autowired
    private MyWebSocket myWebSocket;
    public void getMonitorValue(String value){
        sendValue(value);
    }

    private void sendValue(String value) {
        try{
            myWebSocket.sendMessageToAll(value,this);
        }catch (Exception e){
            e.printStackTrace();
        }
    }

    public boolean matchMessage(String params,String message){
        //信息匹配
        if(message.startsWith(params)){
            return true;
        }
        return false;
    }
}

matchMessage方法做一个简单的业务场景的模拟:前端页面通过WebSocket发送一个订阅信息上来,表示当前页面订阅某一种类型的监测数据,matchMessage方法暂定一个特别简单的逻辑:以订阅信息打头的监测数据仅发送给该订阅客户端。比如客户端订阅“TTT”信息,则监测数据为TTTabce123将发送给该客户端,其他非TTT打头的监测数据将不会发送给该客户端。

第四步:创建Controller,调用MonitorService的getMonitorValue方法,模拟设备监控数据的获取、并发送给订阅该数据的客户端。

package com.example.controller;

import com.example.service.MonitorService;
import com.example.service.TestProperties;
import com.example.service.UserService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Async;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/hello")
@Slf4j
public class HelloWorldController {

    @Autowired
    private MonitorService monitorService;
 
    @GetMapping ("/sendmessage/{msg}")
    public String sendMessage(@PathVariable String msg){
        monitorService.getMonitorValue(msg);
        return "hello";
    }


第五步:客户端代码,写入websocket.htm文件中:

<!DOCTYPE HTML>
<html>
<head>
    <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 = new WebSocket("ws://localhost:8003/websocket");
    }
    else{
        alert('Not support websocket')
    }

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

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

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

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

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

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

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

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

运行测试

启动SpringBoot项目,使用浏览器打开websocket.htm,文本框中输入ttt,表示订阅以ttt开头的实时监测数据,点击send按钮,页面回显ttt,表示客户端与服务端通过WebSocket成功发送、接收了信息:
在这里插入图片描述
浏览器再打开两个websocket.htm页面,分别发送ccc,AAA:
在这里插入图片描述
在这里插入图片描述
浏览器访问我们编写的模拟发送监测数据的服务,发送ttt12323,页面收到返回信息hello,表示发送成功:
在这里插入图片描述
查看已经打开的websocket.htm页面,发现订阅ttt服务的页面收到了服务器端通过websocket协议推送的信息:
在这里插入图片描述
另外两个页面没有收到信息,按照我们的设计,另外两个页面分别定制的是ccc以及AAA信息所以不会收到ttt信息。因此我们分别再次发送ccc及AAA信息:
在这里插入图片描述
在这里插入图片描述
检查websocket.htm页面:
在这里插入图片描述
在这里插入图片描述
ccc以及AAA客户端分别接收到了对应的信息,测试成功!

总结

在SpringBoot项目中使用WebSocket其实非常简单:

  1. 引入依赖。
  2. 通过@ServerEndpoint注解编写WebScoket服务端。
  3. 前端页面通过js代码编写WebSocket客户端。

以上三步,一个简单的WebSocket应用就可以正常工作了。

OK,Many thanks!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/458479.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Redis-复制功能

0 序言 复制功能是Redis提供的多机功能中最基础的一个&#xff0c;这个功能是通过主从复制&#xff08;master-slave replication&#xff09;模式实现的&#xff0c;它允许用户为存储着目标数据库的服务器创建出多个拥有相同数据库副本的服务器&#xff0c;其中存储目标数据库…

ES6:箭头函数中的this指向问题

普通函数中的this指向函数的调用者 例子&#xff1a; 黑马程序员的说法&#xff1a;箭头函数不会创建自己的this&#xff0c;它只会从自己的作用域链的上一层沿用this 尚硅谷的说法&#xff1a;this始终指向函数声明时所在作用域下的this的值 通俗理解就是箭头函数中找this&…

c#简易学生管理系统

https://pan.baidu.com/s/1kCPvWg8P5hvlf26nGf2vxg?pwdya45 ya45

中国钛合金自行车出口海外营销策略-大舍传媒

中国是世界上自行车产量最大的国家之一&#xff0c;而如今&#xff0c;它也在自行车制造领域迈出了一大步。Titan Super Bond与Bright Laser Technologies (BLT)合作&#xff0c;成功开发了中国和亚洲首款全3D打印钛合金自行车车架。 这款创新的自行车车架采用了BLT-A320机器&a…

国产三维声纳

最近几天后台有人问三维声纳的事情。目前市面上三维声纳用得比较多的是Coda Octopus的Echoscope系列产品&#xff0c;Echoscope系列已经从第3代4D版本发展到第4代PIPE版本&#xff08;包含5D和6D&#xff09;&#xff0c;见下图。从它的介绍来看&#xff0c;3D是指采集三维立体…

PHP 生成图片

1.先确认是否有GD库 echo phpinfo(); // 创建一个真彩色图像 $image imagecreatetruecolor(120, 50);// 分配颜色 $bgColor imagecolorallocate($image, 255, 255, 255); // 白色背景 $textColor imagecolorallocate($image, 230, 230, 230); // 黑色文字// 填充背景 image…

Python数据分析-Numpy2

1.numpy读取数据 CSV:Comma-SeparatedValue,逗号分隔值文件 显示&#xff1a;表格状态 源文件&#xff1a;换行和逗号分隔行列的格式化文本,每一行的数据表示一条记录 由于csv便于展示,读取和写入,所以很多地方也是用csv的格式存储和传输中小型的数据,为了方便教学,我们会经…

浅谈C++的浅拷贝和深拷贝问题

今天我们来谈谈C的浅拷贝和深拷贝问题&#xff0c;这里先上定义&#xff0c;可以直接浏览下面的表格&#xff0c;比较直观&#x1f60a;&#x1f60a;&#x1f60a; 。在C中&#xff0c;浅拷贝和深拷贝是两种对象复制的方式&#xff0c;其中&#x1f431;浅拷贝&#xff08;Sha…

最近很火的“30秒展现女孩的一生”AI视频制作全流程

最近很火的AI视频&#xff0c;30秒展现一个人的一生&#xff0c;我们来看一下制作流程 包含以下知识点 安装ComfyUI AnimeDiff插件使用Prompt travel描述视频画面 加载工作流文件 在BatchPromptSchedule这个节点里描述出画面的内容&#xff0c;前面的数字代表对应的帧数 &q…

损失函数和反向传播

1. 损失函数的基础 import torch from torch.nn import L1Loss from torch import nninputs torch.tensor([1, 2, 3], dtypetorch.float32) targets torch.tensor([1, 2, 5], dtypetorch.float32)inputs torch.reshape(inputs, (1, 1, 1, 3)) targets torch.reshape(targe…

[已解决]安装CUDA失败报错(附万能解决办法)

[已解决]安装CUDA失败报错(附万能解决办法) &#xff08;Tips&#xff1a;赶时间直接看万能法2&#xff09; 经过长时间的尝试和研究&#xff0c;我终于解决了安装CUDA失败报错的问题。在这里&#xff0c;我将记录下我遇到的问题以及解决办法&#xff0c;希望对其他小白们有所帮…

关于PolarDB粗浅认识

PolarDB简介 目前&#xff08;20240314&#xff09;&#xff0c;PolarDB有两个版本&#xff1a; PolarDB-PG PolarDB PostgreSQL 版&#xff08;PolarDB for PostgreSQL&#xff0c;简称“PolarDB-PG”&#xff09;是阿里云自主研发的云原生关系型数据库产品&#xff0c;100%…

el-dialog弹框遮罩层问题

先看一下出现的bug&#xff0c;点击按钮出现弹框的时候&#xff0c;遮罩层出现在弹框上层&#xff0c;不知道是那个同事写的全局样式影响的&#xff0c;这个时候我们需要在el-dialog标签上添加一个属性就行 :modal-append-to-body“false” 下图是出现的问题&#xff0c;遮罩层…

什么是 HTTPS?它是如何解决安全性问题的?

什么是 HTTPS&#xff1f; HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff09;是一种安全的通信协议&#xff0c;用于在计算机网络上安全地传输超文本&#xff08;如网页、图像、视频等&#xff09;和其他数据。它是 HTTP 协议的安全版本&#xff0c;通过使用加…

【微服务学习笔记(一)】Nacos、Feign、Gateway基础使用

【微服务学习笔记&#xff08;一&#xff09;】Nacos、Feign、Gateway基础使用 总览Nacos安装配置Nacos注册中心服务多级存储模型负载均衡规则环境隔离 配置管理配置拉取配置热更新多服务共享配置 Feign远程调用配置性能优化Fegin使用 统一网关Gateway搭建网关路由断言工厂&…

扫雷小游戏制作教程:用HTML5和JavaScript打造经典游戏

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

ASP.NET-Server.UrlEncode

目录 背景: Server.UrlEncode作用: 1.URL 编码&#xff1a; 2.避免冲突&#xff1a; 3.安全性&#xff1a; 4.规范化&#xff1a; 实例说明: 不使用Server.UrlEncode 使用Server.UrlEncode 总结: 背景: Server.UrlEncode方法在ASP.NET中主要功能是对URL中的参数进行编…

使用点链云管家创建瑜伽约课小程序

点链云管家 点链云管家是由上海点链科技开发的门店管理系统&#xff0c;为线下门店商家提供一站式门店运营服务平台解决方案&#xff0c;适用于瑜伽健身、美业、新零售会员制电商、母婴店、宠物店、按摩养生、服装、美容、美甲、汽车服务、商超零售、餐饮、KTV娱乐、干洗等18个…

CodeFuse代码优化实战:Java日期格式化时如何正确表示年份?

代码优化&#xff0c;是 CodeFuse 插件推出的功能之一&#xff0c;它可以对选定代码段进行分析理解&#xff0c;提出优化和改进建议。还能直接基于改进建议形成代码补丁&#xff0c;帮助开发者写出更好的代码。 安装CodeFuse插件后&#xff0c;选中代码右键即可使用代码优化功能…

技术帖 | 飞凌嵌入式AM62x核心板SPI的详解与应用

SPI&#xff08;Serial Peripheral Interface&#xff09;通信总线以其高速、全双工、同步的特性而被广泛应用&#xff0c;它只需要四根线就能实现数据传输&#xff0c;有效地节约了芯片管脚的数量&#xff0c;同时为PCB布局带来了空间上的优化和便捷。正因为它简单易用的特点&…