SSE和WebSocket

最新推荐文章于 2024-08-12 11:43:11 发布
最新推荐文章于 2024-08-12 11:43:11 发布
阅读量1.2k 收藏 5
点赞数 2
分类专栏： 网络通信 文章标签： java websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anyview93/article/details/110351197
版权
本文深入探讨了SSE（服务器发送事件）和WebSocket两种实时通信技术。SSE是服务端向客户端单向推送消息的方式，示例展示了如何在Spring框架下实现SSE订阅和推送。WebSocket则支持双向通信，适用于即时通讯场景，文章通过服务端和前端代码展示了WebSocket的创建、连接、消息收发以及关闭过程。同时，提供了模拟接口用于服务端主动推送消息。
摘要由CSDN通过智能技术生成

SSE和WebSocket

SSE

SSE：server send event。服务端发送事件，指服务端主动给客户端推送消息（单向）

服务端代码：

package com.example.demo.sse;

import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.io.IOException;
import java.util.Collection;
import java.util.Map;
import java.util.Objects;
import java.util.concurrent.ConcurrentHashMap;

@CrossOrigin
@Controller
@RequestMapping(path = "sse")
public class Sse {
    /**
     * key为用户Id，内层Map key为客户端ID（一个用户可能在多个客户端中登陆）
     */
    private static Map<String, ConcurrentHashMap<String, SseEmitter>> sseCache = new ConcurrentHashMap<>();

    /**
     * sse订阅方法，注意返回类型为：text/event-stream
     * @param userId 连接用户的ID
     * @param clientId 连接的客户端D
     * @return SseEmitter
     * @throws IOException
     */
    @ResponseBody
    @GetMapping(path = "subscribe", produces = {MediaType.TEXT_EVENT_STREAM_VALUE})
    public SseEmitter subscribe(String userId,String clientId) throws IOException {
        // 超时时间设置为30s，用于演示客户端自动重连
        SseEmitter sseEmitter = new SseEmitter(1000L * 30);
        // 设置前端的重试时间为1s
        sseEmitter.send(SseEmitter.event().reconnectTime(1_000L).data("连接成功"));
        sseCache.putIfAbsent(userId,new ConcurrentHashMap<>());
        sseCache.get(userId).put(clientId,sseEmitter);
        System.out.println("注册 userd:" + userId + "," + "clientId:" + clientId);
        sseEmitter.onTimeout(() -> {
            System.out.println(userId + "--" + clientId + " 超时");
            sseCache.getOrDefault(userId,new ConcurrentHashMap<>()).remove(clientId);
        });
        sseEmitter.onCompletion(() -> System.out.println("完成！！！"));
        return sseEmitter;
    }

    /**
     * 模拟服务端主动给客户端推送消息
     * @param userId 客户端的连接ID（需要接受消息的客户端ID）
     * @param content 发送消息内容
     * @return String
     * @throws IOException
     */
    @GetMapping(path = "push")
    @ResponseBody
    public String push(String userId, String clientId, String content) throws IOException {
        ConcurrentHashMap<String, SseEmitter> sseCacheOrDefault = sseCache.getOrDefault(userId, new ConcurrentHashMap<>());
        if(Objects.nonNull(clientId)){
            sendContent(content,sseCacheOrDefault.get(clientId));
        }else {
            Collection<SseEmitter> values = sseCacheOrDefault.values();
            for (SseEmitter sse: values){
                sendContent(content, sse);
            }
        }
        return "over";
    }

    /**
     * 发送消息
     * @param content 消息内容
     * @param sse SseEmitter
     * @throws IOException
     */
    private void sendContent(String content, SseEmitter sse) throws IOException {
        if(Objects.nonNull(sse)){
            sse.send(content);
        }
    }

    /**
     * 结束连接
     * @param userId 要结束的用户ID
     * @param clientId 要结束的客户端ID
     * @return String
     */
    @GetMapping(path = "over")
    @ResponseBody
    public String over(String userId,String clientId) {
        ConcurrentHashMap<String, SseEmitter> sseCacheOrDefault = sseCache.getOrDefault(userId, new ConcurrentHashMap<>());
        if(Objects.nonNull(clientId)){
            SseEmitter sseEmitter = sseCacheOrDefault.get(clientId);
            if (sseEmitter != null) {
                sseEmitter.complete();
            }
            sseCacheOrDefault.remove(clientId);
        }else {
            Collection<SseEmitter> values = sseCacheOrDefault.values();
            for (SseEmitter sseEmitter: values){
                if (sseEmitter != null) {
                    sseEmitter.complete();
                }
            }
            sseCacheOrDefault.remove(userId);
        }
        return "over";
    }
}

前端代码：

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>WebSocket</title>
      <script type="text/javascript">
      	var host = "127.0.0.1";
      	var port = '8080';
      	var userId = "test";
      	//获取浏览器信息
       var clientId =  window.btoa(window.navigator.userAgent);
       // sse方法
         function sseTest(){
         	var source = new EventSource('http://' + host + ':' + port + '/sse/subscribe?userId=' + userId + '&clientId=' + clientId);
		    source.onmessage = function (event) {
		    	console.log("SSE:"+ event.data)
		    };

		    <!-- 添加一个开启回调 -->
		    source.onopen = function (event) {
		        console.log("SSE:"+event);
		    };
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:sseTest()">运行 SSE</a>
      </div>
      
   </body>
</html>

WebSocket

WebSocket：客户端和服务端实现双工通信（双向），多用于即时通信

服务端代码：

pom.xml

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

注册ServerEndpointExporter

 /**
  * 会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
  * 要注意，如果使用独立的servlet容器，
  * 而不是直接使用springboot的内置容器，
  * 就不要注入ServerEndpointExporter，因为它将由容器自己提供和管理。
  */
@Bean
@ConditionalOnMissingBean(ServerEndpointExporter.class)
public ServerEndpointExporter serverEndpointExporter() {
  return new ServerEndpointExporter();
}

WebSocket服务代码：（服务端核心逻辑）

package com.example.demo.websocket;

import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.util.Collection;
import java.util.Map;
import java.util.Objects;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;

@Component
@ServerEndpoint(value = "/websocket/{userId}/{clientId}")
public class WebSocket {

    private static final AtomicInteger ONLINE_CLIENTS = new AtomicInteger(0);
    /**
     * key为用户Id，内层Map key为客户端ID（一个用户可能在多个客户端中登陆）
     */
    private static final Map<String, Map<String, Session>> CLIENTS = new ConcurrentHashMap<>();

    /**
     * 打开webSocket连接（注册）
     * @param userId 用户ID
     * @param clientId 客户端ID
     * @param session 连接session
     */
    @OnOpen
    public void onOpen(@PathParam("userId") String userId, @PathParam("clientId") String clientId ,Session session) {
        addOnlineCount();
        CLIENTS.putIfAbsent(userId, new ConcurrentHashMap<>());
        CLIENTS.get(userId).put(clientId,session);
        System.out.println("注册 userd:" + userId + "," + "clientId:" + clientId);
    }
    /**
     * 关闭webSocket连接（注销）
     * @param userId 用户ID
     * @param clientId 客户端ID
     * @param session 连接session
     * @throws IOException
     */
    @OnClose
    public void onClose(@PathParam("userId") String userId, @PathParam("clientId") String clientId ,Session session) throws IOException {
        System.out.println("websocket close userd:" + userId + "," + "clientId:" + clientId);
        session.close();
        CLIENTS.getOrDefault(userId,new ConcurrentHashMap<>()).remove(clientId);
        subOnlineCount();
    }


    /**
     * 接受前端信息
     * @param userId 用户ID
     * @param clientId 客户端ID
     * @param content 消息内容
     * @throws IOException
     */
    @OnMessage
    public void onMessage(@PathParam("userId") String userId, @PathParam("clientId") String clientId , String content) throws InterruptedException {
        System.out.println("接受到数据:" + content);
        sendContentToUser(userId,clientId,"已接受到数据:" + content);
        while (true){
            sendContentToUser(userId,clientId, LocalDateTime.now().format(DateTimeFormatter.ISO_LOCAL_DATE_TIME));
            Thread.sleep(5000L);
        }
    }

    /**
     * 接受前端信息
     * @param userId 用户ID
     * @param clientId 客户端ID
     * @param session 报错到sessin连接
     * @param error 抛出到异常
     */
    @OnError
    public void onError(@PathParam("userId") String userId, @PathParam("clientId") String clientId ,Session session, Throwable error) {
        System.out.println("websocket err userd:" + userId + "," + "clientId:" + clientId);
        error.printStackTrace();
    }


    /**
     * 发送消息给指定用户和客户端
     * @param userId 用户ID
     * @param clientId 客户端ID
     * @param content 消息内容
     */
    public static void sendContentToUser(String userId, String clientId, String content) {
        Map<String, Session> clients = CLIENTS.getOrDefault(userId, new ConcurrentHashMap<>());
        if(Objects.nonNull(clientId)){
            Session session = clients.get(clientId);
            sendContent(content, session);
        }else {
            Collection<Session> values = clients.values();
            for (Session session: values){
                sendContent(content,session);
            }
        }
    }

    /**
     * 用给指定session发送消息
     * @param content 消息内容
     * @param session 指定到session连接
     */
    private static void sendContent(String content, Session session) {
        if (Objects.nonNull(session)) {
            session.getAsyncRemote().sendText(content);
        }
    }


    /**
     * 发送消息给所有用户
     * @param content 消息内容
     */
    public static void sendContentAll(String content) {
        Collection<Map<String, Session>> values = CLIENTS.values();
        values.forEach(m -> m.values().forEach(s -> sendContent(content,s)));
    }



    private static int getOnlineCount() {
        return ONLINE_CLIENTS.get();
    }



    private static void addOnlineCount() {
        ONLINE_CLIENTS.addAndGet(1);
    }

    private static void subOnlineCount() {
        ONLINE_CLIENTS.decrementAndGet();
    }

}

模拟接口:（模拟服务端主动给客户端推送消息）

package com.example.demo.controller;

import com.example.demo.websocket.WebSocket;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class WebSocketController {
    /**
     * 模拟给指定用户和客户端发送消息
     * @param userId 用户Id
     * @param clientId 客户端ID
     * @param content 消息内容
     * @return String
     */
    @RequestMapping("/push")
    public String push(String userId,String clientId,String content){
        WebSocket.sendContentToUser(userId,clientId,content);
        return "OK";
    }

    /**
     * 模拟给所有客户端发消息
     * @param content 消息内容
     * @return String
     */
    @RequestMapping("/pushAll")
    public String pushAll(String content){
        WebSocket.sendContentAll(content);
        return "OK";
    }
}

前端代码：

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>WebSocket</title>
      <script type="text/javascript">
      	var host = "127.0.0.1";
      	var port = '8080';
      	var userId = "test";
      	//获取浏览器信息
       var clientId =  window.btoa(window.navigator.userAgent);
       // webSocket方法
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               // 打开一个 web socket
               var ws = new WebSocket("ws://" + host+ ":" + port + "/websocket/" + clientId);
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  // alert("数据已接收..." + received_msg);
                  console.log("WebSocket:"+ received_msg);
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script> 
   </head>
   <body>
   
      <div id="websocket">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a><br>
      </div>
      
   </body>
</html>
anyview93
关注
专栏目录
即时通讯开发中WebSocket和SSE技术如何实现Web端消息推送
蔚可云的博客
08-18 1124
无需发送 GET 消息并等待服务器响应，客户端只需监听该套接字，接收服务器更新，并使用收到的数据来发起或支持各种交互。与 WebSocket 相比，SSE 的一个优势是它是基于 HTTP 而运行的，不需要其他组件。SSE 是一个更简单且更快的解决方案，但它是不可扩展的。对于只需要能向客户端传输异步服务器消息的 Web 应用程序，服务器发送的事件是一个优雅且简单的解决方案。HTTP 服务器推送也称为 HTTP 流，是一种客户端-服务器通信模式，它将信息从 HTTP 服务器异步发送到客户端，而无需客户端请求。.
SSE与WebSocket
weixin_34239169的博客
09-12 372
　　Ajax是一种从页面向服务器请求数据的技术，Comet则是一种服务器向页面推送数据的技术，它能够让信息近乎实时地被推送到页面上。 　　有两种实现Comet的方式：长轮询和流。 　　长轮询是浏览器定时向服务器发送请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据后，浏览器关闭连接，随即发起一个新的请求。 　　短轮询与长轮询的区别是，服务器接收到请求后，是否立即发送响应。短轮...
Java SSE：实现服务器推送数据客户端
最新发布
Java小菜鸟
08-12 1014
体验过​大语言模型的人（chatgpt，文心一言，通义千问...）都知道，大模型的回答是一边思考一边返回数据的，属于流式响应。要达到这种效果就需要实现前后端的即时通讯。
消息推送技术（sse、websocket）
码农之路，向死而生
10-18 4654
消息推送-ajax长短轮循、sse技术、websocket技术
SpringBoot之WebSocket和SSE
weixin_33929309的博客
10-12 319
2019独角兽企业重金招聘Python工程师标准>>> ...
SSE技术和WebSocket技术实现即时通讯
weixin_43599321的博客
08-06 3769
服务器发送事件SSE（Server-Sent Events）是一种基于HTTP的单向通信机制，用于实现服务器主动向客户端推送数据的技术，也被称为“事件流它基于HTTP协议，利用其长链接的特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端实时数据推送。WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议。它是 HTML5 中的一种新特性，能够实现 Web 应用程序和服务器之间的实时通信，比如在线聊天、游戏、数据可视化等。
velox:通过SSE和WebSocket进行实时Go结构到JS对象同步
05-14
在Go和JavaScript（Node.js和浏览器）上通过SSE和WebSocket进行实时JS对象同步 特征 简单的API 在Go中同步任何JSON可编组结构 同步Node中的任何JSON可字符串化的结构 使用Delta更新 支持和 SSE可回退到旧版...
SSE和webSocket的区别
06-08
SSE（Server-Sent Events）和 WebSocket 都是用于在 Web 应用程序中实现实时通信的技术，但它们有一些区别。 SSE 是一种单向通信协议，它允许服务器向客户端推送事件流。SSE 使用基于 HTTP 的长连接，也就是说，...
【Websocket】基本介绍、原理、特点、使用以及与长短轮询和SSE的区别
qq_43057018的博客
06-28 859
在WebSocket出现之前，web交互一般是基于Http协议的短连接或长连接WebSocket是一种在单个TCP连接上进行全双工通信的协议，属于应用层协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。客户端向 WebSocket 服务器通知（notify）一个带有所有接收者ID（recipients IDs）的事件（event），服务
即时通讯的实现：短轮询、长轮询、SSE 和 WebSocket 间的区别
04-13
短轮询是客户端不停地向服务器发送请求，询问是否有新消息；长轮询是客户端向服务器发送请求，等待服务器的...WebSocket是一种双向通信协议，建立连接后客户端和服务器可以互相发送消息，可以节省不必要的HTTP请求。
实时通讯技术Ajax，WebSocket，SSE
个人学习笔记库，一篇一篇记录成长的足迹
12-20 3367
简要介绍ajax，websocket，sse三种通讯的简要使用。
SSE和WebSocket的用法和比较
weixin_30273501的博客
02-08 5467
在我们日常开发中，会遇到服务端和客户端的通讯，今天我们就来比较一下HTML5新特性SSE和WebSocket的用法。 一，SSE 简介 SSE（Server-Sent Events，服务器发送事件）是围绕只读Comet 交互推出的API 或者模式。 SSE API允许网页获得来自服务器的更新（HTML5），用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。服务器响...
SSE 和 Websocket 的比较
weixin_42560424的博客
07-13 7158
本文详细解析了SSE和WebSocket这两种实现实时通信的技术。SSE是一种基于HTTP的单向通信机制，适用于实时更新数据的应用场景。WebSocket是一种全双工通信协议，支持双向通信，适用于实时互动的应用场景。它们在通信模型、连接性、实时性、浏览器支持和API复杂性等方面存在一些区别。选择SSE还是WebSocket取决于您的应用需求。如果您只需要服务器向客户端推送数据，并且实时性要求不高，SSE是一个简单可行的选择。
【HTML5】WebSocket和SSE
前端-后端学习之路
11-29 9240
Comet&SSE有两种实现 Comet 的方式：长轮询和流。 简单介绍一下短轮询和长轮询、流 短轮询：请求，立刻响应。 长轮询：等待有消息的时候相应。-流不同于上述两种轮询，因为它在页面的整个生命周期内只 使用一个HTTP 连接SSE（Server-Sent Events，服务器发送事件）是围绕只读Comet 交互推出的API 或者模式。 SSE API允许网页获
WebSocket 与 SSE 的对比：服务器推送技术的进化
程序员光剑
12-29 651
1.背景介绍 WebSocket 和 SSE 都是服务器推送技术，它们在现代网络应用中发挥着重要作用。WebSocket 是一种基于 TCP 的协议，它允许客户端和服务器全双工地传输数据，而 SSE 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端推送数据。在本文中，我们将对比 WebSocket 和 SSE，探讨它们的优缺点以及在不同场景下的应用。 1.1 WebSocket 简...
webSocket & SSE
code1Boy的博客
02-25 602
一、通讯方式 1.单工通讯 消息只能单方向传输的工作方式。 2.半双工通讯 可以实现双向的通信，但不能双向同时进行传输，必须轮流交替地进行传输。 3.双工通讯 同一时刻可以进行双向传输。 二、实现web实时通讯有很多，如下： 1.常轮询 由浏览器发送一个请求，服务端接收请求后，再没有新数据时先将请求阻塞，直到...
SSE和websocket
weixin_37841024的博客
01-03 663
1. 客户端发起 HTTP 请求：客户端向服务器发起普通的 HTTP GET 请求，请求头中包含特定的 WebSocket 相关字段，如 `Upgrade: websocket` 和 `Connection: Upgrade`。相比于传统的请求-响应模式，它提供了一种服务器主动推送数据给客户端的机制，实现了服务器到客户端的单向实时通信。每个事件由多行组成，包含字段和数据。通过将 HTTP 请求升级为 WebSocket 连接，可以实现高效的实时通信，避免了频繁的连接建立和关闭，提供更好的性能和用户体验。
SSE与WebSocket分别实现服务器发送消息通知（Golang、Gin）
qq_51110841的博客
08-27 2422
服务端推送，也称为消息推送或通知推送，是一种允许应用服务器主动将信息发送到客户端的能力，为客户端提供了实时的信息更新和通知，增强了用户体验。实时通知：在很多情况下，用户期望实时接收到应用的通知，如新消息提醒、商品活动提醒等。节省资源：如果没有服务端推送，客户端需要通过轮询的方式来获取新信息，会造成客户端、服务端的资源损耗。通过服务端推送，客户端只需要在收到通知时做出响应，大大减少了资源的消耗。增强用户体验：通过服务端推送，应用可以针对特定用户或用户群发送有针对性的内容，如优惠活动、个性化推荐等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值