RealTime-Nachrichtenübermittlung nach vorne

Ich bin sicher, dass jeder Webentwickler vor der Aufgabe stand, die WEB-Benutzeroberfläche nach Ereignissen im Back-End umgehend zu aktualisieren. Ein klassisches Beispiel ist der Web-Chat (wenn Sie Ihren Fire- Web-Chat bereits geschrieben haben , können Sie das Lesen überspringen, wahrscheinlich wissen Sie bereits alles unten).

In X5 begegne ich solchen Aufgaben mit einer beneidenswerten Häufigkeit. Ich muss sagen, dass alle Arten von Chats, Chatbots und anderen RealTime-Endbenutzerinteraktionen derzeit im Trend liegen. In diesem Artikel möchte ich meine Erfahrungen in dieser Angelegenheit zusammenfassen und mit den Lesern von Habr teilen.

Formulierung des Problems

Wir benötigen einen universellen und effizienten Transport, um Ereignisse von der WEB-Benutzeroberfläche (dem Browser des Benutzers) zum Server und zurück vom Server zur WEB-Benutzeroberfläche zu übertragen

Option 1 - Regelmäßige Umfragen

der einfachste und unwirksamste Weg

Die Bedeutung ergibt sich aus dem Namen, von der Client2-Seite in regelmäßigen Abständen, z. B. alle 1 Sekunde, werden Anfragen wie "Was machen Sie?" An den Server gesendet.

Dieser Ansatz hat zwei wesentliche Nachteile:

1. 1-10 , , 1-10 , , , . , , 1-10 RPS.

   
   
   
   
   

2. — RealTime. , RealTime.

   
   
   
   
   

№2 -

long polling

№1, , , http-, (.. ), , , . , . , TimeOut

, , .

:

1. , .. http-, , , .

   
   
   
   
   

2. RealTime, .. , . , http . , , .. .

   
   
   
   
   

- №1.

№3 - SERVER SENT EVENT (SSE)

+ API

Server-Sent Events EventSource, . , EventSource . . , retry: ( )

!!! – !

, , , .

. , SSE , REST. http-. , , 1-10 ( ), - №1 :(, , , .

– . , . , , .

№4 - WEBSOCKET

WEBSOCKET SSE . SSE WEBSOCKET.

FrontEnd <-> BackEnd Websocket Golang.

?

№1 - web- ( , app ..):

1. FrontEnd BackEnd (WS)

   
   
   
   
   

2. BackEnd (WS)

   
   
   
   
   

3. FrontEnd . (REST) (, )

   
   
   
   
   

3- .2, , .

2 - () , ,

1. BackEnd (WS)

   
   
   
   
   

2. FrontEnd (WS)

   
   
   
   
   

( )

:

1. (http://your_domain/ws)

   
   
   
   
   

2. Go «HUB»,

   
   
   
   
   
   
   
   
   
   

http http://your_domain/ws :

1. Go ( , ws )

   
   
   
   
   

2. http ws “CLIENT_CONNECTED”

   
   
   
   
   

// Message ...
type Message struct {
    Type        string `json:"type,omitempty"`
    Event       string `json:"event"`
    Data        string `json:"data"`
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Event –

Data –

Type –

Type = publish, Data , Event

Type = broadcast, Data

Type = subscribe, , Event

Type = unsubscribe, , Event

-

. , MacBook Pro i5 8Gb 12K RPS

- . . .

. js/sdk (6Kb) web-.

SDK:

1. - , , .

   
   
   
   
   

2. – , SDK .

   
   
   
   
   

sdk :

<script src="http://localhost:9000/sdk/js" async onload="initEventTube()"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

localhost:9000 –

:

function initEventTube(){
  var options={
    connection:{
      host:'localhost',
      port:'9000'
    }
  }
  var eventTube=new EventTube(options);
  window.EventTube=eventTube;
  window.EventTube.connect();
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

var self=this;
var subscriptionId=null;
window.EventTube.sub('YOUR_EVENT_NAME',function(data){
  // 
  console.log(data);
}).then(function(subId){
  //   
  subscriptionId = subId;
  onsole.log('subId:',subId);
},function(err){
  //   
  console.log(err);
});

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

window.EventTube.pub('YOUR_EVENT_NAME', 'YOUR_EVENT_DATA');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

window.EventTube.unsub('YOUR_EVENT_NAME', 'OPTIONAL_SUB_ID');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. OPTIONAL_SUB_ID, , , . SUB_ID (. « »)

:

Golang . Golang

$ git clone git@github.com:colber/eventtube-server.git your_dir
$ cd your_dir
$ go run main.go
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Docker

$ docker pull ptimofeev/eventtube:latest
$ docker run --name eventtube --rm -p 9000:9000 ptimofeev/eventtube
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

: localhost:9000

- ( )

$ git clone git@github.com:colber/eventtube-client.git your_dir
$ cd your_dir
$ yarn install
$ yarn serve

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

http://localhost:8080