手记

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


0人推荐
随时随地看视频
慕课网APP