消息推送

最新推荐文章于 2023-08-02 00:33:00 发布

在那一刻zj

最新推荐文章于 2023-08-02 00:33:00 发布

阅读量672

点赞数

本文链接：https://blog.csdn.net/qq_40082631/article/details/108556406

版权

消息推送

消息推送是针对 Web 应用开发领域的技术，指服务端以主动方式将信息送达客户端。主要用于提升用户体验，避免用户刷新页面从服务端拉取数据。例如 Web 邮件中自动出现刚收到的邮件项，Web 即时通讯自动提示新到消息等应用场景。

推送方式

轮询（Polling）
AJAX 定时（可以使用JS的 setTimeout 函数）去服务器查询是否有新消息，从而进行增量式的更新。这种方式间隔多长时间再查询是个问题，间隔太短，海量的请求会拖垮服务器，间隔太长，服务器上的新数据就需要更长的时间才能到达客户机。

35729[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AjvxhC6C-1599921492095)(https://public.dm.files.1drv.com/y4pyMgdq4f9dKyAkvk6P4Cqm_LHNmCsBajTK-iScwPgaKbwt_EBeVZCrEii80hQwsCW96wm8McYxl18N8bBppSf7QO_o2_ICNXNbTFnVgTy8xsSm_6iopIXxqLQLFJM1qshcULbpA2T2mvt1C4MnuDJTXDfHV2EIIM6Q-PTGYz-OJN_I7gHkuz7BPfkwhxXM1Wd/simple-poll.png?psid=1&rdrts=242115355)]

优点：服务端逻辑简单,可根据应用场景调整轮询时间间隔；
缺点：大多数请求是无效请求，在轮询很频繁的情况下对服务器的压力很大；

所以，除了一些简单练习项目外，这种方式不能被用于生产。

长轮询（Long-Polling）
客户端向服务器发送AJAX请求，服务器接到请求后将该请求挂起，直到有新消息或超时（设置）才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wNYvEX6-1599921492101)(https://public.dm.files.1drv.com/y4pngDukCIBk1UUwT6VsIjB3Ge83plAT-tmvYWNYEsm-yjyvKK9DswRYAxTPew1kQhq1IFN8nxNqYvAtIiGPCv7WA4n5wZm3ztKei8aMFKUuVRomWo_p1wg4OqNyr6l3hqIp_bOGtwMWm-7j0uOrEAx1WjwzyJyaztANnfkGX87ZZVq4xUguNjIzbOw_iuzGSZQ/long-poll.png?psid=1&rdrts=242115355)]
- 优点：任意浏览器都可用；实时性好，无消息的情况下不会进行频繁的请求；

缺点：连接创建销毁操作还是比较频繁，服务器维持着连接比较消耗资源；

插件提供的Socket方式

利用Flash XMLSocket，Java Applet套接口，Activex包装的socket。
- 优点：原生socket的支持，和PC端和移动端的实现方式相似；
- 缺点：浏览器端需要装相应的插件;
WebSocket

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b3Js2x6y-1599921492103)(img/1567594143540.png)]
- 缺点: 只兼容IE10及以上,但还是有解决方案的,只需要在前端引入相应的库便可,可参考该文章https://juejin.im/post/5aef0e9c518825673a20754d.

WebSocket简介

轮询的效率低下,非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）,而 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

1. websocket是什么

它是一种网络通信协议,是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,WebSocket协议基于TCP协议实现，包含初始的握手过程，以及后续的多次数据帧双向传输过程.其目的是在WebSocket应用和WebSocket服务器进行频繁双向通信时，可以使服务器避免打开多个HTTP连接进行工作来节约资源，提高了工作效率和资源利用率。

WebSocket目前支持两种统一资源标志符ws(80端口)和wss(443端口)，类似于HTTP和HTTPS。

2.websocket解决了http的哪些问题

Websocket解决了HTTP的这几个难题。首先，被动性，当服务器完成协议升级后（HTTP->Websocket），服务端就可以主动推送信息给客户端。解决了上面同步有延迟的问题。
解决服务器上消耗资源的问题：其实我们所用的程序是要经过两层代理的，即HTTP协议在Nginx等服务器的解析下，然后再传送给相应的Handler（php等）来处理。简单地说，我们有一个非常快速的接线员（Nginx），他负责把问题转交给相应的客服（Handler）。Websocket就解决了这样一个难题，建立后，可以直接跟接线员建立持久连接，有信息的时候客服想办法通知接线员，然后接线员在统一转交给客户。
由于Websocket只需要一次HTTP握手，所以说整个通讯过程是建立在一次连接/状态中，也就避免了HTTP的非状态性，服务端会一直知道你的信息，直到你关闭请求，这样就解决了接线员要反复解析HTTP协议的问题。

3.websocket握手

websocket是基于http协议也可以说借用了http完成了一部分握手。

websocket标准的请求头:

GET /chat HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: 127.0.0.1:8001
Origin: http://127.0.0.1:8001
Sec-WebSocket-Key: hj0eNqbhE/A0GkBXDRrYYw==
Sec-WebSocket-Version: 13

在这个请求头中,Upgrade用于告诉服务器协议升级, Sec-WebSocket-Key是客户端也就是浏览器或者其他终端随机生成一组16位的随机base64编码; Sec-WebSocket-Version就是当前使用协议的版本号

服务器在接受到上面的请求之后，会返回一个response 头包完成握手。

HTTP/1.1 101 Switching Protocols
Content-Length: 0
Upgrade: websocket
Sec-Websocket-Accept: ZEs+c+VBk8Aj01+wJGN7Y15796g=
Server: TornadoServer/4.5.1
Connection: Upgrade
Date: Wed, 21 Jun 2017 03:29:14 GMT

由Sec-Websocket-Accept的key完成校验

4. 使用websocket所需jar包

 <dependency>
    <groupId>javax.websocket</groupId>
    <artifactId>javax.websocket-api</artifactId>
    <version>1.1</version>
    <scope>provided</scope>
 </dependency>

5.Javascript 使用websocket建立连接

表单页面:

<div>
    <hr>
    您的姓名:<input type="text" id="username">
    <hr>
    <button onclick="build()">建立连接</button>
</div>
<hr>
<div>
    发送给:<input type="text" id="tousername">
</div>
<hr>
<div>
    <textarea rows="10" cols="100" id="content">
    </textarea>
    <br> <br>
    <button onclick="send()">发送</button>
</div>

<div id="showMessage"></div>

js 代码

<script>
    var websocket = null;

    function build() {
        var username = $("#username").val();
        if ('WebSocket' in window) {
            websocket = new WebSocket(
                "ws://localhost:8080/JavaWebSocket/websocket?username=" + username);
            //连接成功建立的回调方法
            websocket.onopen = function () {
                $("#showMessage").append("<p color='red'>build success!</p>");
                $("#tousername").append("<option>" + username + "</option>");
            }
            //连接发生错误的回调方法
            websocket.onerror = function () {
                alert("登录失败");
            };
            //连接关闭的回调方法
            websocket.onclose = function () {
                $("#showMessage").html("连接关闭");
            };
            //接收到消息的回调方法
            websocket.onmessage = function (e) {
                var jsonObject = JSON.parse(e.data);
                $("#showMessage").append("<p>" + jsonObject.from + "对" + jsonObject.to + "说:" + jsonObject.content + "</p>");
            };
        } else
            alert("Not Support!");
    }

    window.onbeforeunload = function () {
        if (null != websocket)
            websocket.close();
    };

    function send() {
        var username = $("#username").val();
        var content = $("#content").val();
        var tousername = $("#tousername").val();
        var mes = {
            "from": username,
            "to": tousername,
            "content": content
        };
        if (null != websocket)
            websocket.send(JSON.stringify(mes));
    }
</script>

6. Java代码

/**
 * @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
 * 注解的值将被用于监听用户连接的终端访问URL地址,
 */
@ServerEndpoint("/websocket")
public class WebSocket {

    private String username;
    private static ConcurrentMap<String, WebSocket> users = new ConcurrentHashMap<String, WebSocket>();
    private Session session;

    // 这个方法是根据自己的需要写的,不是必须
    private void sendMessage(String mes) {
        this.session.getAsyncRemote().sendText(mes);
    }

    /**
     * 连接建立成功调用的方法
     *
     * @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        Map<String, List<String>> map = session.getRequestParameterMap();
        username = map.get("username").get(0);//url中携带的参数
        users.put(username, this);
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        users.remove(username);
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     * @param session 可选的参数
     */
    @OnMessage

    public void onMessage(String message, Session session) {

        System.out.println("来自客户端的消息:" + message);

        // 把接收到的json数据转化成MessageDto对象

        Gson gson = new Gson();

        MessageDto mes = gson.fromJson(message, MessageDto.class);

        if (mes.getTo() == null) {

            Set<String> key = users.keySet();

            for (String k : key) {

                if (k.equals(mes.from)) continue;

                users.get(k).sendMessage(message);

            }

        } else {

            WebSocket toServlet = users.get(mes.getFrom());

            WebSocket toServlet2 = users.get(mes.getTo());

            if (null != toServlet) {

                // 向信息发送目标信息

                toServlet.sendMessage(message);

                // 向信息来源发送信息
                toServlet2.sendMessage(message);

            }

        }
    }
}

7. 文档参考网站

Javascript : https://www.runoob.com/html/html5-websocket.html(菜鸟教程)

websocket与http对比: https://www.cnblogs.com/fuqiang88/p/5956363.html

IE等低版本浏览器兼容问题: https://juejin.im/post/5aef0e9c518825673a20754d

在那一刻zj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
消息推送

消息推送消息推送是针对 Web 应用开发领域的技术，指服务端以主动方式将信息送达客户端。主要用于提升用户体验，避免用户刷新页面从服务端拉取数据。例如 Web 邮件中自动出现刚收到的邮件项，Web 即时通讯自动提示新到消息等应用场景。推送方式轮询（Polling）AJAX 定时（可以使用JS的 setTimeout 函数）去服务器查询是否有新消息，从而进行增量式的更新。这种方式间隔多长时间再查询是个问题，间隔太短，海量的请求会拖垮服务器，间隔太长，服务器上的新数据就需要更长的时间才能到达客户机。
复制链接

扫一扫