SpringBoot使用WebScoket（附带前端测试代码）

最新推荐文章于 2024-07-19 11:10:22 发布
最新推荐文章于 2024-07-19 11:10:22 发布
阅读量577 收藏 2
点赞数
分类专栏： Springboot 文章标签： websocket java vue http springBoot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunayn/article/details/113608319
版权

什么是WebScoket?

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

为什么使用WebScoket？

因为 ：HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。而WebScoket可以由服务器主动发送信息给客户端。

应用实例：

maven依赖：

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

启用WebSocket的支持：创建WebSocketConfig类

package com.iecas.monitor.webscoket.config;

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

/**
 * @Auther: sy
 * @Date: 2020/10/29 20:57
 * @Description: 配置websocket后台客户端
 */

@Component
public class WebSocketConfig {
    /**
     * ServerEndpointExporter 作用
     *
     * 这个Bean会自动注册使用@ServerEndpoint注解声明的websocket endpoint
     *
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

WebSocketServer：

这就是重点了，核心都在这里。

  1. 因为WebSocket是类似客户端服务端的形式(采用ws协议)，那么这里的WebSocketServer其实就相当于一个ws协议的Controller

  2. 直接@ServerEndpoint("/webScoket/send") 、@Component启用即可，然后在里面实现@OnOpen开启连接，@onClose关闭连接，@onMessage接收消息等方法。

  3. 新建一个LinkedList  webSocketServiceList用于储存多个连接，当需要推送时同时推送多个页面。

  4. sendInfoOne(String message )方法直接调用发送到前端，scheduledSend()定时监听设置推送条件，符合条件进行推送。

    package com.iecas.monitor.webscoket.service;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang.StringUtils;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.LinkedList;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentLinkedQueue;

@Slf4j
@Component
@EnableScheduling   // 2.开启定时任务
@ServerEndpoint("/websocket/send")
public class WebSocketGroupService {

    /**
     * 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
     */
    private static int onlineCount = 0;
    /**
     * concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
     */
    private static LinkedList<WebSocketGroupService> webSocketServiceList = new LinkedList<>();
    /**
     * concurrent包的线程安全Set，用来存放要发送的数据
     */
    private static LinkedList<String> messageList = new LinkedList<>();

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

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketServiceList.add(this);
        addOnlineCount();
        log.info("当前连接数为:" + getOnlineCount());
        try {
            sendMessage("连接成功");
        } catch (IOException e) {
            log.error("连接失败!!!!!!");
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketServiceList.remove(this);
        subOnlineCount();
        log.info("当前在线人数为:" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("报文:" + message);
        //消息保存到数据库、redis
        if (StringUtils.isNotBlank(message)) {
            try {
                //解析发送的报文
                JSONObject jsonObject = JSON.parseObject(message);
                for (WebSocketGroupService webSocketGroupService : webSocketServiceList) {
                    webSocketGroupService.sendMessage(jsonObject.toJSONString());
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("错误原因:" + error.getMessage());
        error.printStackTrace();
    }

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

    @ApiOperation("添加定时任务")
    @Scheduled(cron = "0/10 * * * * ?")
    private void scheduledSend() {
        try {
            //发送消息数
            for (String message : messageList) {
                //发送连接数
                for (WebSocketGroupService webSocketGroupService : webSocketServiceList) {
                    //发送消息
                    webSocketGroupService.sendMessage(message);
                }
            }
            if (!CollectionUtils.isEmpty(messageList)) {
                log.info("发送成功：共发送给[{}]个页面，[{}]个消息", webSocketServiceList.size(), messageList.size());
                messageList.clear();
            }
        } catch (Exception e) {
            log.error("发送失败：" + e);
            e.printStackTrace();
        }
    }

    /**
     * 将发送消息加入缓存
     */
    public static void sendInfo(String message) throws IOException {
        try {
            messageList.add(message);
        } catch (Exception e) {
            log.error("发送失败：" + e);
            e.printStackTrace();
        }
    }

    /**
     * 直接发送自定义消息
     */
    public static void sendInfoOne(String message ) throws IOException {
        try {
            for (WebSocketGroupService webSocketGroupService : webSocketServiceList) {
                webSocketGroupService.sendMessage(message);
            }
            log.info("共发送[{}]个消息，成功" + webSocketServiceList.size());
        } catch (Exception e) {
            log.error("发送失败：" + e);
            e.printStackTrace();
        }
    }

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

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

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

    测试消息推送：

 自己的Controller写个方法调用WebSocketServer.sendInfo();即可

package com.iecas.monitor.webscoket.controller;

import com.iecas.monitor.webscoket.service.WebSocketGroupService;
import com.iecas.monitor.webscoket.service.WebSocketService;
import org.java_websocket.server.WebSocketServer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import java.io.IOException;

/**
 * WebSocketController
 */
@RestController
public class WebSocketController {

    //通过controller返回html界面
    @RequestMapping("/index")
    public String indexJumpPage() {
        return "index";
    }

    @GetMapping("page")
    public ModelAndView page() {
        return new ModelAndView("websocket");
    }

    @GetMapping("/push/{name}")
    public ResponseEntity<String> pushToWeb(@PathVariable String name) throws IOException {
        WebSocketService.sendInfoByType("测试推送");
        return ResponseEntity.ok("MSG SEND SUCCESS");
    }

    @GetMapping("/send/{name}")
    public ResponseEntity<String> send(@PathVariable String name) throws IOException {
        WebSocketGroupService.sendInfo("测试推送");
        return ResponseEntity.ok("MSG SEND SUCCESS");
    }
}

前端HTML5代码：

前端测试代码index.html位置：/src/main/resources/templates下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket通讯</title>
</head>
<script type = "text/javascript">
    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
             socket = new WebSocket("ws://localhost:8080/websocket/send");
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                console.log(msg.data);
            };
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
        }
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
        }
    }
</script>
<body>
<p>【message】：
<div><input id="message" name="message" type="text" value="message is null"></div>
<p>【操作】：
<div><a onclick="openSocket()">开启socket</a></div>
<p>【操作】：
<div><a onclick="sendMessage()">发送消息</a></div>
</body>

</html>

在SpringBoot配置文件中加入：

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: LEGACYHTML5
    cache: false

运行效果：

显示页面路径：http://localhost:8080/index

调用发送测试路径：http://localhost:8080/send/sy

改动后面参数查看发送效果

在这里插入图片描述

一个喜欢健身的程序员
关注
专栏目录
springBoot集成webSocket并使用postMan进行测试
m0_71777195的博客
12-15 2008
ws协议是全双工通信，客户端发起请求后，相当于搭建了一个通道，在不断开的情况下，在这期间，服务端可以把请求发给客户端，客户端也可以在这期间处理别的事情，不必等待服务端的响应。http协议是单工通信，客户端发起请求，服务端收到请求并处理，返回给客户端，然后客户端收到服务端的请求。简单来讲，webSocket是一种在http协议基础上的另一种新协议，叫ws协议。webSocket经常被用作聊天室，两个客户端，通过一个服务端分发请求，进行沟通。接下来，模拟服务端给客户端发送请求，建立一个http请求。
spring boot 使用 web Socket 的两种方式
测试0901-1
01-03 882
方法一 使用 @ServerEndpoint 注解方式 添加 ServerEndpointExporter 到 IOC 容器中 ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();} 使用@ServerEndpoint pack...
Spring Boot实现Web Socket
明月阁
10-14 328
原文链接：https://www.dubby.cn/detail.html?id=9102 实现代码 依赖 &lt;dependency&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boot-starter-websocket&lt;/artifactId&...
SpringBoot整合WebSocket服务 springboot整合websocket springboot使用websocket springboot使用websocket
最新发布
半只
07-19 3643
仅使用 SpringBoot封装好的服务，并不是使用第三方Netty或者: 底层使用实现: 底层使用Netty实现(没有使用过，不知道具体)官方文档1官方文档2。
SpringBoot中WebScoket的使用
weixin_52917644的博客
12-02 322
Websocket通过 HTTP/1.1 协议的101状态码进行握手，首先客户端（如浏览器）发出带有特殊消息头（Upgrade、Connection）的请求到服务器，服务器判断是否支持升级，支持则返回响应状态码101，表示协议升级成功，对于WebSocket就是握手成功。WebSocket全双工通信协议，在客户端和服务端建立连接后，可以持续双向通信，和HTTP同属于应用层协议，并且都依赖于传输层的TCP/IP协议。1、导入spring-boot-starter-websocket依赖。
SpringBoot 使用WebSocket详解
热门推荐
y393016244的博客
10-02 1万+
Spring boot 使用websocket
SpringBoot 使用 WebSocket及注意事项
xixisi888的博客
09-03 873
WebSocket 实例 WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存
SpringBoot 使用WebSocket打造在线聊天室（基于注解）
ITjianshuzhai的博客
06-08 721
推荐WebSocket的三大理由： 1、采用全双工通信，摆脱传统HTTP轮询的窘境。2、采用W3C国际标准，完美支持HTML5。3、简单高效，容易上手。 学习目标 快速学会通过WebSocket编写简单聊天功能。 快速查阅 专题阅读：《SpringBoot 布道系列》 温馨提示：1、WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速...
Springboot整合websocket实现一对一消息推送和广播消息推送
sgegv的博客
04-07 410
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
Springboot 整合websocket
戴林峰的博客
07-24 181
需要引入maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </depende...
websocket 通信demo实现实时对话 多人群聊和私聊 附带前端页面成品工程
08-09
在本示例中，“websocket 通信demo实现实时对话 多人群聊和私聊 附带前端页面成品工程”是一个完整的项目，旨在展示如何使用WebSocket技术构建一个实时聊天应用。这个应用包含了群聊和私聊的功能，这需要服务器端...
Springboot基于websocket实现简单在线聊天功能
08-19
主要介绍了Springboot基于websocket实现简单在线聊天功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
SpringBoot+WebSocket--亲测可用
01-29
CSDN上的大部分我都下过了不能用，此SpringBoot 集成WebSocket ,亲测可用 支持jdk1.8,
spring boot+websocket前后端简单demo
06-29
使用spring boot+websocket实现一个websocket连接，使用IDEA打开项目，运行Application.java运行后台，然后打开localhost:8080打开前端即可测试
SpringBoot整合WebSocket测试
weixin_48732663的博客
02-25 869
WebSocketConfig 启用WebSocket的支持 @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } } maven依赖 <!-- socket依赖 --> <dependency>
websocket Demo 绝对是可以用的demo.
ZwRiven的博客
12-12 9747
前言:花了一上午各种百度websocket  demo,但都跑不起来,如果你是跟我一样项目出错了,看到我这篇文章,也不妨试试看看说不定能解决你的问题. 环境  maven3.39  tomcat7(一定要7或以上版本否则不行)  jdk1.7(一定要7或以上版本否则不行) tomcat跟jdk的版本我都在pom文件里做了引入. 项目开始 第一步,创建maven项目(红框框的都必填,
Springboot超仔细整合websocket(附案例代码)
qq_55272229的博客
06-30 4248
添加依赖：确保在pom.xml中添加Spring WebSocket和WebSocket依赖。创建WebSocket处理器(端点)：编写一个处理WebSocket消息的处理器。完成对应的生命周期如果需要传递http第一次握手时候处理信息 需要添加对应的处理配置配置WebSocket：配置WebSocket相关的Bean和端点(值得注意的是每一个端点对象对一个用户线程 所以spring的单实列bean和异步处理再这里无法生效 具体会在踩坑笔记中提及)
springboot+webSocket
qq_57667629的博客
06-07 293
3、配置socket。
springboot使用websocket示例代码
05-22
以下是一个使用Spring Boot和WebSocket的示例代码： 1. 首先，在pom.xml文件中添加以下依赖： ``` <groupId>org.springframework.boot <artifactId>spring-boot-starter-websocket ``` 2. 创建一个WebSocket...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值