webSocket & SSE

最新推荐文章于 2024-09-09 23:18:13 发布
最新推荐文章于 2024-09-09 23:18:13 发布
阅读量602 收藏 2
点赞数
分类专栏： Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/code1Boy/article/details/79370158
版权

一、通讯方式
1.单工通讯
消息只能单方向传输的工作方式。
2.半双工通讯
可以实现双向的通信，但不能双向同时进行传输，必须轮流交替地进行传输。
3.双工通讯
同一时刻可以进行双向传输。
二、实现web实时通讯有很多，如下：
1.常轮询
由浏览器发送一个请求，服务端接收请求后，再没有新数据时先将请求阻塞，直到有新数据或者超时时才返回
2.短轮询
由浏览器发送一个请求，服务端无论是否有新数据都及时响应，http连接结束；（可以通过自定义返回数据标识或者判断数据是否为空来判断这次请求是否有新数据返回）
3.webSocket协议
是一种网络通信协议，是真正的双向平等对话，属于服务器推送技术的一种
4.长连接
服务器端发送完新数据也不断开连接，继续等待下一份新数据，直到超时
5.心跳机制
客户端每个一段时间向服务端发送一个心跳消息，服务器接收心跳消息后恢复同样的心跳消息，直到超出心跳时长还没有响应则认为断开

三、通信技术之websocke实现
1.服务端：
需要导入的依赖：

    < dependency >
        < groupId > javax.websocket </ groupId >
        < artifactId > javax.websocket-api </ artifactId >
        < version > 1.1 </ version >
    </ dependency >
    < dependency >
        < groupId > org.springframework </ groupId >
        < artifactId > spring-websocket </ artifactId >
        < version > 4.0.5.RELEASE </ version >
    </ dependency >

服务端具体实现：


import java.io.IOException;
import java.util.Hashtable;
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.PathParam;
import javax.websocket.server.ServerEndpoint;

import org.springframework.stereotype.Controller;
import org.springframework.web.socket.server.standard.SpringConfigurator;

// 该注解用来指定一个URI，客户端可以通过这个URI来连接到WebSocket。
/**
           类似Servlet的注解mapping。无需在web.xml中配置。
 * configurator = SpringConfigurator.class是为了使该类可以通过Spring注入。
*/
@Controller
@ServerEndpoint(value = "/websocket.do/{userId}",configurator = SpringConfigurator.class)
public class WebsocketController {
    // 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    private static int index = 0;
    public WebsocketController(){}


    // Hashtable是线程安全的。
    private static Hashtable<WebsocketController, Long> webSocketMap = new Hashtable<WebsocketController, Long>();
    // 与客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;


    /**
     * 连接建立成功调用的方法
     * @param session  可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(@PathParam("userId") Long userId,Session session)
    {
        System.out.println("userId:" + userId);
        this.session = session;
        webSocketMap.put(this, userId);
        addOnlineCount();
        System.out.println("有新连接加入！当前在线人数为:" + getOnlineCount());
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose()
    {
        webSocketMap.remove(this);
        subOnlineCount();
        System.out.println("当前连接已退出！当前在线人数为：" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     * @param session 可选的参数
     */
    @OnMessage
    public void onMessage(String message, Session session)
    {
         System.out.println("来自客户端的消息:" + message);
         // 这里就是随便模拟的，请不要在意，实际可以通过userId获得用户名称
         for(WebsocketController soc : webSocketMap.keySet())
         {
             try {
                 if(index % 2 == 0)
                 {
                     soc.sendMessage("小强" + ":" + message);
                 }
                 else
                 {
                     soc.sendMessage("璐璐" + ":" + message);
                 }
            } catch (IOException e) {
                e.printStackTrace();
            }
         }
         index ++;
    }

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


    /**
     * 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
     * @param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException
    {
         this.session.getBasicRemote().sendText(message);
         //this.session.getAsyncRemote().sendText(message);
    }

    // 获取连接数量，保持同步
    public static synchronized int getOnlineCount() 
    {
        return onlineCount;
    }

    // 连接数量加1，保持同步
    public static synchronized void addOnlineCount() 
    {
        WebsocketController.onlineCount++;
    }

    // 连接数量减1，保持同步
    public static synchronized void subOnlineCount() 
    {
        WebsocketController.onlineCount--;
    }
}

前端页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>聊天室</title>
</head>
<body >
<input id="text" type="text"/>
<button onclick="send()">发送</button>
<button onclick="closeWebSocket()">关闭连接</button>
<div id="message">
</div>
 在线人数<span id="onlineCount">1</span>人

</body>
<script type="text/javascript" src="http://localhost:8080/leasplat/newFile/js/jquery-3.0.0.js"></script>
<!-- <script type="text/javascript" src="http://localhost:8080/leasplat/newFile/js/websocket.js"></script> -->
<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/leasplat/websocket.do/1");
    }
    else {
        alert("对不起！你的浏览器不支持webSocket")
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("error");
    };
    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        setMessageInnerHTML("加入连接");
    };
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    };
    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("断开连接");
    };
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，
    // 防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        var is = confirm("确定关闭窗口？");
        if (is){
            websocket.close();
        }
    };
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        // $("#msg").append(innerHTML+"<br/>")
        console.log(innerHTML);
    };
    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }
    //发送消息
    function send() {
        var message = $("#text").val() ;
        websocket.send(message);
        $("#text").val("") ;
    }
</script>
</html>

四、服务端信息推送技术sse
全称：server-sent-event
后端代码：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
import java.util.Random;

/**
 * Created by shiqiang on 2018/2/9.
 */
@Controller
public class SSEController {

    /**
     * 消息推送sse
     *
     * 这里不能进行return 否则后使得连接关闭，sse会默认重连，就陷入了连接、关闭的死循环了
     *
     * evensource.js 不支持sse当浏览器可以引入这个js进行支持
     */
    @RequestMapping(value = "/push", produces = "text/event-stream")
    public void push(HttpServletResponse response) throws Exception{
        response.setContentType("text/event-stream");
        response.setCharacterEncoding("utf-8");
        while (true) {
            Random r = new Random();
            try {
                Thread.sleep(1000);
                PrintWriter pw = response.getWriter();
                pw.write("data:Testing 1,2,3" + r.nextInt() + "\n\n");
                pw.flush();

                // 当浏览器页面关闭，检测pw flush断开后刷新异常，return进行断开sse
                if (pw.checkError()) {
                    System.out.println("客户端断开连接");
                    return;
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

前度页面代码块：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
<!-- 我是在csdn网站上提取的一个jquery连接地址，大家可以换成你们下载的本地的jquery -->
<script src="http://c.csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
         //只有新式的浏览器才有，EventSource是SSE的客户端
        if (!!window.EventSource) {
            var source = new EventSource('../../push');
            s = '';
            source.addEventListener('open', function(e) {
                console.log("连接打开");
            }, false);
            //添加SSE监听，获得服务器推送的消息
            source.addEventListener('message', function(e) {
                console.log(e);
                s += e.data + "<br/>";
                $('#msgFromPush').html(s);
            }, false);
            // 上次回调事件
            source.addEventListener("connecttime", function(event) {
                console.log("Connection was last established at: " + event.data);
            }, false);
            // 发生错误时
            source.addEventListener('error', function(e) {
                if (e.readyState == EventSource.CLOSED) {
                    console.log('连接关闭');
                } else {
                    // 关闭sse
                    source.close();
                    console.log(e.target.readyState);
                }
            },false);
        } else {
            console.log('你的浏览器不支持SSE');
        }
         /**
          * 上面的方法也可以写成 ： source.onMessage = function(e){console.log(e)}
          * 上面的几个方法都可以以类似的方法写
          */
    </script>
</html>

更详细的讲解可以参考：
SSE：
http://javascript.ruanyifeng.com/htmlapi/eventsource.html
webSocket：
http://www.ruanyifeng.com/blog/2017/05/websocket.html

code1Boy
关注
专栏目录
实时通讯技术Ajax，WebSocket，SSE
个人学习笔记库，一篇一篇记录成长的足迹
12-20 3375
简要介绍ajax，websocket，sse三种通讯的简要使用。
Web端即时通讯 Comet Websocket SSE
王甲评的博客
02-21 898
主流的Web端即时通讯方案大致有4种：传统Ajax短轮询、Comet技术、WebSocket技术、SSE（Server-sent Events）。一、Comet含义：是一种服务器推送数据的技术(更高级的ajax技术)实现方式：长轮询和流；介绍：        1、短轮询：                     请求之后服务器立即响应        2、长轮询                   ...
WebSocket与sse
最新发布
m0_70334976的博客
09-09 446
Button @click='closeWs '> 关闭连接<Button>console.log('客户端与服务端连接失败，准备开始重连')if(ws.readyState == 0) ｛ // 重连成功。console.log('ws连接成功啦！console.log('ws关闭成功啦！console.log('ws出错啦！console.log('重连中.....')
Web实时通信的学习之旅：轮询、WebSocket、SSE的区别以及优缺点
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-26 2356
WebSocket比SSE功能更加强大，WebSocket是在服务端和客户端建立的双向实时数据通道，而SSE只支持服务端想客户端的单向通讯浏览器对WebSocket的支持也更加广泛，IE、Edge几乎不支持SSEWebSocket有一套独立的标准协议，在使用过程中必须按照标准协议来，而SSE使用的是Http协议，只需要更改Context-Type为"text/event-stream;charset=utf-8"即可，这里需要特殊注意的一点，必须是utf-8。
SSE与WebSocket
weixin_34239169的博客
09-12 372
　　Ajax是一种从页面向服务器请求数据的技术，Comet则是一种服务器向页面推送数据的技术，它能够让信息近乎实时地被推送到页面上。 　　有两种实现Comet的方式：长轮询和流。 　　长轮询是浏览器定时向服务器发送请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据后，浏览器关闭连接，随即发起一个新的请求。 　　短轮询与长轮询的区别是，服务器接收到请求后，是否立即发送响应。短轮...
SSE和WebSocket
anyview93的博客
11-29 1271
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
消息推送技术（sse、websocket）
码农之路，向死而生
10-18 4677
消息推送-ajax长短轮循、sse技术、websocket技术
WebSocket&SSE实时动态数据展示
qq_35310348的博客
12-23 1434
WebSocket SSE服务端实时推送数据
定时推送后台数据到前台websocket和sse实现
l1394049664的博客
11-11 4261
前言：本文的实现环境基于springboot2 1、websocket的实现 前端页面： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt;     &lt;meta charset="UTF-8" /&gt;     &lt;title&gt;&lt;/title&gt; &lt;/head&
即时通讯开发中WebSocket和SSE技术如何实现Web端消息推送
蔚可云的博客
08-18 1124
无需发送 GET 消息并等待服务器响应，客户端只需监听该套接字，接收服务器更新，并使用收到的数据来发起或支持各种交互。与 WebSocket 相比，SSE 的一个优势是它是基于 HTTP 而运行的，不需要其他组件。SSE 是一个更简单且更快的解决方案，但它是不可扩展的。对于只需要能向客户端传输异步服务器消息的 Web 应用程序，服务器发送的事件是一个优雅且简单的解决方案。HTTP 服务器推送也称为 HTTP 流，是一种客户端-服务器通信模式，它将信息从 HTTP 服务器异步发送到客户端，而无需客户端请求。.
带有通知系统和多个服务器更新客户端技术的聊天应用程序，使用Websocket，SSE，短和长轮询连接-Node.js开发
05-27
带有通知系统和多个服务器更新客户端技术的聊天应用程序，使用Websocket，SSE，短和长-轮询连接网络套接字连接带有通知系统和多个服务器更新客户端技术的聊天应用程序，使用Websocket，SSE，短和长期的轮询-轮询连接...
SSE 和 Websocket 的比较
weixin_42560424的博客
07-13 7174
本文详细解析了SSE和WebSocket这两种实现实时通信的技术。SSE是一种基于HTTP的单向通信机制，适用于实时更新数据的应用场景。WebSocket是一种全双工通信协议，支持双向通信，适用于实时互动的应用场景。它们在通信模型、连接性、实时性、浏览器支持和API复杂性等方面存在一些区别。选择SSE还是WebSocket取决于您的应用需求。如果您只需要服务器向客户端推送数据，并且实时性要求不高，SSE是一个简单可行的选择。
SSE技术和WebSocket技术实现即时通讯
weixin_43599321的博客
08-06 3784
服务器发送事件SSE（Server-Sent Events）是一种基于HTTP的单向通信机制，用于实现服务器主动向客户端推送数据的技术，也被称为“事件流它基于HTTP协议，利用其长链接的特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端实时数据推送。WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议。它是 HTML5 中的一种新特性，能够实现 Web 应用程序和服务器之间的实时通信，比如在线聊天、游戏、数据可视化等。
SSE和WebSocket的用法和比较
weixin_30273501的博客
02-08 5467
在我们日常开发中，会遇到服务端和客户端的通讯，今天我们就来比较一下HTML5新特性SSE和WebSocket的用法。 一，SSE 简介 SSE（Server-Sent Events，服务器发送事件）是围绕只读Comet 交互推出的API 或者模式。 SSE API允许网页获得来自服务器的更新（HTML5），用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。服务器响...
SSE和websocket
weixin_37841024的博客
01-03 663
1. 客户端发起 HTTP 请求：客户端向服务器发起普通的 HTTP GET 请求，请求头中包含特定的 WebSocket 相关字段，如 `Upgrade: websocket` 和 `Connection: Upgrade`。相比于传统的请求-响应模式，它提供了一种服务器主动推送数据给客户端的机制，实现了服务器到客户端的单向实时通信。每个事件由多行组成，包含字段和数据。通过将 HTTP 请求升级为 WebSocket 连接，可以实现高效的实时通信，避免了频繁的连接建立和关闭，提供更好的性能和用户体验。
WebSocket 与 SSE 的对比：服务器推送技术的进化
程序员光剑
12-29 652
1.背景介绍 WebSocket 和 SSE 都是服务器推送技术，它们在现代网络应用中发挥着重要作用。WebSocket 是一种基于 TCP 的协议，它允许客户端和服务器全双工地传输数据，而 SSE 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端推送数据。在本文中，我们将对比 WebSocket 和 SSE，探讨它们的优缺点以及在不同场景下的应用。 1.1 WebSocket 简...
【JavaWeb】小白也能看懂的服务器推送技术(WebSocket和SSE)
墩墩分墩
02-01 3407
消息推送(push)通常是指网站的运营工作等人员，通过某种工具对用户当前网页或移动设备APP进行的主动消息推送 - WebSocket是html5出现的一种在·`TCP连接`上进行`全双工通信`的协议 - 浏览器和服务器仅需`一次握手`，就可以建立`持久性的连接`，并进行`双向数据传输`。 - WebSocket目前支持ws和wss两种模式，对应HTTP和HTTPS。
sse websocket
07-05
SSE (Server-Sent Events) 和 WebSocket 都是现代 web 开发中用于实现实时双向通信的技术。 1. SSE（Server-Sent Events）： SSE 是一种简单但有限的实时数据传输协议。它允许服务器向浏览器推送连续的数据流，而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值