一. 前言

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

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

二. WebSocket介绍

2.1 概念

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

WebSocket是一种在单个​​TCP​​​连接上进行​​全双工​​​通信的协议。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接口中明确定义了与其生命周期相关的方法，规范实现者确保生命周期的各个阶段调用实例的相关方法。生命周期方法如下：

方法含义描述注解onOpen当开启一个新的会话时调用，该方法是客户端与服务器端握手成功后调用的方法@OnOpenonClose当会话关闭时调用@onCloseonError当连接过程中异常时调用@OnError

三. 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是浏览器发起向服务器的连接，服务器预先并不知道这个连接。