消息推送实现|使用WebSocket主动推送消息到客户端方案

左手的ㄟ右手 2024-04-01 12:44 95阅读 0赞

## 一. 前言 ##

在开发中，我们经常会遇到这样一类需求：需要在网页上显示天气预报，股票数据或者实时排行榜单等实时变化的数据。对于此类需求，**一种****较为****原始的做法就是****让****客户端每隔一段时间主动****去****轮询服务器****。**但这种做法有一个很大的弊端：如果客户端的数量很大，每隔一段时间就发消息给服务器的话，服务器的并发压力会非常巨大。而且访问的频度也很难精确把握，过于频繁地访问服务器，则压力太大；不频繁的话，数据更新可能又不及时。

所以今天，**壹哥**将会给大家分享一个**可以让服务器主动推送消息给客户端的技术--WebSocket****！**

## 二. WebSocket介绍 ##

### 2.1 概念 ###

以下是百度百科对websocket的定义：

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

### 2.2 WebSocket运行流程 ###

>  *  首先，客户端发起http请求，经过3次握手后，建立起TCP连接。http请求里存放WebSocket支持的版本号等信息，如Upgrade、Connection、WebSocket-Version等；
>  *  然后，服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据；
>  *  最后，客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信。

### 2.3 **Tomcat对WebSocket的支持** ###

Tomcat7.0.5开始支持WebSocoket。客户端通过WebSocket协议和服务器端握手，就会创建EndPoint实例。EndPoint实例在客户端与服务器链接过程中有效，最后在链接关闭时结束。在Endpoint接口中明确定义了与其生命周期相关的方法，规范实现者确保生命周期的各个阶段调用实例的相关方法。生命周期方法如下：

> <table> 
>  <tbody> 
>   <tr> 
>    <td>方法</td> 
>    <td>含义描述</td> 
>    <td>注解</td> 
>   </tr> 
>   <tr> 
>    <td>onOpen</td> 
>    <td>当开启一个新的会话时调用，该方法是客户端与服务器端握手成功后调用的方法</td> 
>    <td>@OnOpen</td> 
>   </tr> 
>   <tr> 
>    <td>onClose</td> 
>    <td>当会话关闭时调用</td> 
>    <td>@onClose</td> 
>   </tr> 
>   <tr> 
>    <td>onError</td> 
>    <td>当连接过程中异常时调用</td> 
>    <td>@OnError</td> 
>   </tr> 
>  </tbody> 
> </table>

## **三.** **WebSocket基本使用** ##

### 3.1 浏览器和服务器建立起连接 ###

在浏览器中使用WebSocket进行连接，代码如下：

// WebSocket HTML5提供的内置对象
    var ws = new WebSocket("ws://localhost:8080/chatroom_war_exploded/wstest");
    ws.onopen=function(){
        alert("连接服务器成功")
    }

在后端创建Endpoint类，代码如下：

@ServerEndpoint("/wstest")
    public class WsTest {
        @OnOpen
        public void onOpen(Session session, EndpointConfig endpointConfig) {
            System.out.println("有客户端连接了");
        }
    }

### 3.2 浏览器发送消息给服务器 ###

浏览器通过send方法给服务器端发送消息，代码如下：

function send(){
        //发送消息
        var msg = document.getElementById("msg");
        ws.send(msg.value);
        msg.value = ""
    }

服务器端通过onMessage接收请求消息，代码如下：

@OnMessage
    public void onMessage(String message,Session session){
        System.out.println("来自客户端的消息："+message);
    }

### 3.3 服务器端推送消息给浏览器 ###

在服务器端推送消息，代码如下：

@OnMessage
    public void onMessage(String message,Session session){
        System.out.println("来自客户端的消息："+message);
        //返回消息给客户端
        try {
            // session 就是客户端和服务器自连接起来建立的会话
            // 直到关闭连接直接这个会话一直是连接的，所以我们在这个过程中可以用它给客户端推送消息
            session.getBasicRemote().sendText("收到你的消息了");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

在浏览器中通过onmessage接收接收消息，代码如下：

ws.onmessage=function(res){
        console.log("来自服务器的消息："+res.data)
    }

### 3.4 关闭连接 ###

服务器端关闭，代码如下：

session.close();

客户端关闭，代码如下：

ws.close();

服务器端对关闭的响应，代码如下：

@OnClose
    
    public void onClose(Session session){
    
        System.out.println("连接已经关闭了,");
    
    }

客户端对关闭的响应，代码如下：

ws.onclose=function(){
    
        console.log("连接已经关闭")
    
    }

### 3.5 异常处理 ###

服务器端异常处理，代码如下：

@OnError
    public void onError(Throwable t) throws Throwable {
        System.out.println("系统异常！msg:" + t);
    }

浏览器端异常处理，代码如下：

ws.onclose=function(){
        console.log("连接已经关闭")
    }

## 四. 总结 ##

**壹哥**认为，websocket协议就是对http协议不能主动接受服务器推送消息的一种补充。以下是**壹哥**给大家总结出的http协议和websocket协议之间的区别：

>  *  **WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息****；**
>  *  **HTTP是单向的；**
>  *  **WebSocket是需要浏览器和服务器握手进行建立连接的；**
>  *  **http是浏览器发起向服务器的连接，服务器预先并不知道这个连接。**

[TCP]: https://baike.baidu.com/item/TCP?fromModule=lemma_inlink
[Link 1]: https://baike.baidu.com/item/%E5%85%A8%E5%8F%8C%E5%B7%A5?fromModule=lemma_inlink
[IETF]: https://baike.baidu.com/item/IETF?fromModule=lemma_inlink
[W3C]: https://baike.baidu.com/item/W3C?fromModule=lemma_inlink