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

<dependency> 
<groupId>org.springframework.boot</groupId> 
<artifactId>spring-boot-starter-websocket</artifactId> 
</dependency>

在配置类@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<WebSocket> webSockets =new CopyOnWriteArraySet<>();     
    private static Map<String,Session> sessionPool = new HashMap<String,Session>();     
    
    @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}

可以在 WebSocket在线测试网站 上测试后端接口。

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<any>{    
     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

<div class="output-window">   
  <div *ngFor="let mv of messageValue;let i=index">   
  {{i+1}}. {{mv}}   
  </div> 
</div> 

<nz-input-group class="input-window" nzSearch nzSize="large" [nzAddOnAfter]="suffixButton">     
  <input type="text" nz-input placeholder="发送消息..." [(ngModel)]="sendValue"  (keyup.enter)="sendMessage()"/>   
</nz-input-group>   
<ng-template #suffixButton>    
   <button nz-button nzType="primary" nzSize="large" nzSearch (click)="sendMessage()">发送</button>  
  </ng-template>

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团队技术人员编写，转载请标明出处