WebSocket，不再“轮询”-白红宇

1. 前言

本文先讲解WebSocket的应用场景和特点，然后通过前后端示例代码讲解，展示在实际的开发中的应用。

1.1. 应用场景

WebSocket是一种在单个TCP连接上进行全双工通信的协议, 是为了满足基于 Web 的日益增长的实时通信需求而产生的。我们平时接触的大多数是HTTP的接口，但是在有些业务场景中满足不了我们的需求，这时候就需要用到WebSocket。简单举两个例子：

（1）页面地图上要实时显示在线人员坐标：传统基于HTTP接口的处理方式是轮询，每次轮询更新最新的坐标信息。

（2）手机的付款码页面，在外界设备扫描付款码支付成功后，手机付款码页面提示“支付成功”并自动关闭：传统方式还是轮询，付款码页面一直调用接口，直到从服务器获取成功支付的状态后，手机提示“支付成功”并关闭付款码页面。

HTTP 协议有一个缺陷：通信只能由客户端发起。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。但这种方式即浪费带宽（HTTP HEAD 是比较大的），又消耗服务器 CPU 占用（没有信息也要接受请求）。

在WebSocket API尚未被众多浏览器实现和发布的时期，开发者在开发需要接收来自服务器的实时通知应用程序时，不得不求助于一些“hacks”来模拟实时连接以实现实时通信，最流行的一种方式是长轮询。长轮询主要是发出一个HTTP请求到服务器，然后保持连接打开以允许服务器在稍后的时间响应（由服务器确定）。为了这个连接有效地工作，许多技术需要被用于确保消息不错过，如需要在服务器端缓存和记录多个的连接信息（每个客户）。虽然长轮询是可以解决这一问题的，但它会耗费更多的资源，如CPU、内存和带宽等，要想很好的解决实时通信问题就需要设计和发布一种新的协议

1.2. WebSocket定义

WebSocket是一种协议，是一种与HTTP 同等的网络协议，两者都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

相比于传统HTTP 的每次“请求-应答”都要client 与 server 建立连接的模式，WebSocket 是一种长连接的模式。就是一旦WebSocket 连接建立后，除非client 或者 server 中有一端主动断开连接，否则每次数据传输之前都不需要HTTP 那样请求数据。

WebSocket 对象提供了一组 API，用于创建和管理 WebSocket 连接，以及通过连接发送和接收数据。浏览器提供的WebSocket API很简洁，调用示例如下：

var ws = new WebSocket('wss://example.com/socket'); // 创建安全WebSocket 连接（wss）ws.onerror = function (error) { ... } // 错误处理ws.onclose = function () { ... } // 关闭时调用ws.onopen = function () { ws.send("Connection established. Hello server!");} // 连接建立时调用向服务端发送消息ws.onmessage = function(msg) {  ... }// 接收服务端发送的消息复制代码

HTTP、WebSocket 等应用层协议，都是基于 TCP 协议来传输数据的。我们可以把这些高级协议理解成对 TCP 的封装。既然大家都使用 TCP 协议，那么大家的连接和断开，都要遵循 TCP 协议中的三次握手和四次握手，只是在连接之后发送的内容不同，或者是断开的时间不同。对于 WebSocket 来说，它必须依赖 HTTP 协议进行一次握手，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。

2. 后端WebSocket服务（SpringBoot）

pom.xml


    
     
      org.springframework.boot
     
     
      spring-boot-starter-websocket
     
    复制代码

在配置类@Configuration下注册ServerEndpointExporter的Bean，这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint

@Bean public ServerEndpointExporter serverEndpointExporter(){        return new ServerEndpointExporter(); }复制代码

创建WebSocket的工具类WebSocket.java

import org.springframework.stereotype.Component;import javax.websocket.OnClose;import javax.websocket.OnMessage;import javax.websocket.OnOpen;import javax.websocket.Session;import javax.websocket.server.PathParam;import javax.websocket.server.ServerEndpoint;import java.util.HashMap;import java.util.Map;import java.util.concurrent.CopyOnWriteArraySet;@Component@ServerEndpoint("/websocket/{userId}")public class WebSocket {    private Session session;    private static CopyOnWriteArraySet
    
      webSockets =new CopyOnWriteArraySet<>();    private static Map
     
       sessionPool = new HashMap
      
       ();    @OnOpen    public void onOpen(Session session, @PathParam(value="userId")String userId) {        this.session = session;        webSockets.add(this);        sessionPool.put(userId, session);        System.out.println("【websocket消息】有新的连接，总数为:"+webSockets.size());    }    @OnClose    public void onClose() {        webSockets.remove(this);        System.out.println("【websocket消息】连接断开，总数为:"+webSockets.size());    }    @OnMessage    public void onMessage(String message) {        System.out.println("【websocket消息】收到客户端消息:"+message);    }    // 此为广播消息    public void sendAllMessage(String message) {        for(WebSocket webSocket : webSockets) {            System.out.println("【websocket消息】广播消息:"+message);            try {                webSocket.session.getAsyncRemote().sendText(message);            } catch (Exception e) {                e.printStackTrace();            }        }    }    // 此为单点消息    public void sendOneMessage(String userId, String message) {        Session session = sessionPool.get(userId);        if (session != null) {            try {                session.getAsyncRemote().sendText(message);            } catch (Exception e) {                e.printStackTrace();            }        }    }}复制代码

到此WebSocket的代码就结束了，运行该SpringBoot项目，对应的WebSocket地址为：ws://127.0.0.1:port/websocket/{userId}

可以在上测试后端接口。

3. 前端WebSocket调用（Angular）

3.1. npm依赖

安装 rxjs 的依赖库

npm install rxjs@6.3.3 --save            //示例代码，也可以装其他版本复制代码

安装websocket 依赖库

npm install ws --save复制代码

安装类型定义文件

npm install @types/ws --save-dev复制代码

3.2. WebSocket Service

创建 WebSocket 的Service文件

ng g service websocket复制代码

上述命令生成了websocket.service.ts文件，示例代码为：

import { Injectable } from '@angular/core';import {Subject, Observer, Observable} from 'rxjs';import { ThrowStmt } from '@angular/compiler';@Injectable({  providedIn: 'root'})export class WebsocketService {  ws:WebSocket;  constructor() { } createObservableSocket(url:string):Observable
    
     {   this.ws=new WebSocket(url);   return new Observable(     observer=>{       this.ws.onmessage=(event)=>observer.next(event.data);       this.ws.onerror=(event)=>observer.error(event);       this.ws.onclose=(event)=> observer.complete();     }   ); } sendMessage(message:string){   this.ws.send(message); }}复制代码

3.3. Demo演示

简单做个demo页面，有留言板和输入框。同时开多个浏览器页面，只要在任意一个页面的输入框中输入文字，所有页面的留言板上都会实时显示出来。

示例的代码提供，app.component.html

app.component.ts

import { Component, OnInit, Input } from '@angular/core';import { WebsocketService } from './websocket.service';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit{  title = 'websocket-demo-web';  messageValue=[];  sendValue="";  constructor(private websocketService:WebsocketService){}  ngOnInit(){    this.websocketService.createObservableSocket("ws://127.0.0.1:port/websocket/kerry")    .subscribe(      data=>{console.log(data);this.messageValue.push(data) ;},      error=>console.log(error),      ()=>console.log("已结束")    );  }  sendMessage(){    this.websocketService.sendMessage(this.sendValue);    this.sendValue=null;  }}复制代码

app.component.css

.output-window{    width: 60%;    height: 250px;    background-color: black;    color: chartreuse;    margin-left: 20%;}.input-window{    width: 60%;    height: 30px;    background-color: #c4c4c40d;    margin-left: 20%;    margin-top: 20px;}.input-button{    height: 30px;    width: 60px;    margin-left: 10px;}复制代码

本人创业团队产品MadPecker，主要做BUG管理、测试管理、应用分发，网址:www.madpecker.com，有需要的朋友欢迎试用、体验！

本文为MadPecker团队技术人员编写，转载请标明出处