Des données à l'application de grands modèles, le 25 novembre, la conférence Hangzhou Yuanchuang a eu lieu pour partager des conseils de développement.

1. Origines

Lors du développement de certaines pages frontales, nous recevons toujours les exigences suivantes : Comment maintenir la page et mettre à jour automatiquement les données ? Dans le passé, la pratique courante consistait pour le front-end à utiliser une interrogation programmée de l'interface back-end, puis à restituer la page front-end après avoir obtenu la réponse. Bien que cette approche puisse produire des effets similaires, elle a encore de nombreux Les lacunes ne seront pas abordées ici. Pour ceux que cela intéresse, les partenaires peuvent les vérifier par eux-mêmes. Rappelons-nous maintenant : avons-nous déjà réfléchi à l'existence d'une technologie permettant au serveur de transmettre activement les données au client pour le rendu, au lieu que le client fasse une requête au serveur et attende que le résultat soit renvoyé ? Ensuite, découvrons ensemble weboskcet.

2. Qu'est-ce que WebSocket ?

Websocket fait partie de la spécification HTML5 et s'appuie sur l'idée des sockets pour réaliser une communication en duplex intégral entre le navigateur et le serveur, obtenant ainsi l'effet d'une communication instantanée. Le protocole websocket est implémenté sur la base du protocole TCP, y compris le processus d'établissement de liaison initial et le processus de transmission bidirectionnel ultérieur de plusieurs trames de données, ce qui empêche le serveur d'ouvrir fréquemment plusieurs connexions HTTP, économisant ainsi mieux les ressources et la bande passante du serveur, et améliorant efficacité du travail et utilisation des ressources.

3. Principe de fonctionnement

Spécification de communication de Websocket. Tout d'abord, le navigateur envoie une demande de connexion Websocket via le protocole HTTP et le serveur répond. Ce processus est appelé poignée de main. Une fois la poignée de main terminée, une connexion de type TCP est établie entre le client et le serveur, en utilisant le protocole websocket, mettre en œuvre la communication entre eux.

4. Relation avec HTTP

Même point :

1. Ils sont tous basés sur le protocole TCP et sont des protocoles de transmission fiables ;

2. Ce sont tous des protocoles de couche application ;

3. Websocket prend en charge deux identifiants de ressources ws (port par défaut 80) et wss (port par défaut 443), similaires à HTTP et HTTPS ;

différence:

1. Websocket est un protocole de communication bidirectionnel et HTTP est unidirectionnel ;

2. Websocket nécessite une poignée de main entre le navigateur et le serveur pour établir une connexion. En HTTP, le navigateur initie une connexion au serveur. Le serveur ne connaît pas cette connexion à l'avance.

Connexions:

Lorsque websocket établit une poignée de main, les données sont transmises via HTTP. La transmission des données après l'établissement ne nécessitera plus le protocole HTTP, mais le protocole websocket ;

5. Création de Websocket et méthodes d'attributs couramment utilisées

5.1 Propriétés du socket Web

Les attributs	décrire
état prêt	L'attribut en lecture seule readyState indique l'état de la connexion et peut prendre les valeurs suivantes : 0 : indique que la connexion n'a pas encore été établie. 1 : Indique que la connexion a été établie et que la communication est possible. 2 : Indique que la connexion est en cours de fermeture. 3 : Indique que la connexion a été fermée ou que la connexion ne peut pas être ouverte.
montant tampon	La propriété en lecture seule bufferedAmount est le nombre d'octets de texte UTF-8 qui ont été mis en file d'attente par send() pour transmission, mais qui n'ont pas encore été envoyés.
DE LIAISON	Une valeur de 0 indique que la connexion est établie
OUVRIR	Une valeur de 1 indique que la connexion est établie et que la communication est possible
FERMETURE	Une valeur de 2 indique que la connexion est en cours de fermeture
FERMÉ	Une valeur de 3 indique que la connexion a été fermée ou que la connexion ne peut pas être ouverte.

// 创建websocket
var ws = new WebSocket("ws://www.example.com");
  if(ws.readyState == ws.CONNECTING){
    console.log('连接正在打开');
  }

  ws.onopen = function () {
    ws.send(consumerId);
    if(ws.readyState == ws.CONNECTING){
      console.log('连接正在打开1');
    }
    if(ws.readyState == ws.OPEN){
      console.log('连接已打开');
    }
    console.log('已经建立连接');
    // 关闭连接
    // ws.close()
  };


  // 连接关闭时触发
  ws.onclose = function () {
    if(ws.readyState == ws.CLOSED){
      console.log('连接已关闭')
    }
  };

  // 连接错误
  ws.onerror = function () {
    console.log('连接错误');
  };

5.2 Événement weboscket

événement	gestionnaire	décrire
ouvrir	ouvert	Déclenché lorsque la connexion est établie
message	sur message	Déclenché lors de la réception d'un message
erreur	une erreur	Se déclenche lorsqu'une erreur se produit
fermer	onclose	Déclenché lorsque la connexion est fermée

5.3 Exemple simple de client

// 创建websocket
var ws = new WebSocket("ws://www.example.com");

// 连接成功时触发
ws.onopen = function(e) {
    console.log("Connectiong open ...");
    // 发送消息
    ws.send("Hello WebSocket");
};

// 接收消息时触发
ws.onmessage = function(e) {
    console.log("Received Message: " + e.data);
    ws.close();
};

// 关闭连接时触发
ws.onclose = function(e) {
    console.log("Connection closed");
};

// 出现错误时触发
ws.onerror = function(e) {
    console.log("error");
};

5.4 Exemple simple côté serveur

# 创建websocket服务端
from tornado.websocket import WebSocketHandler

class wsHandler(WebSocketHandler):
    # 保存连接的用户，用于后续推送消息
    connect_users = set()
    
    # 已与客户端建立连接
    def open(self):
        print("开启WebSocket opened")
        self.connect_users.add(self)

    # 关闭客户端连接
    def on_close(self):
        self.connect_users.remove(self)
    
    # 接收到消息
    def on_message(self, message): 
        self.write_message("接收到客户端的消息：{}".format(message))

    # 所有用户发送消息
    @classmethod
    def send_demand_updates(cls, message):
        # 使用@classmethod可以使类方法在调用的时候不用进行实例化
        # 给所有用户推送消息（此处可以根据需要，修改为给指定用户进行推送消息）
        for user in cls.connect_users:
            user.write_message(message)

    # 允许WebSocket的跨域请求
    def check_origin(self, origin):
        return True

if __name__ == "__main__":
    # 调用
    wsHandler。send_demand_updates("服务端发送给客户端的消息")

Remarque : Le langage python est utilisé dans l'exemple et le serveur Web principal doit être construit sur la base du framework tornado. L'article n'explique pas comment construire le serveur. Les amis intéressés peuvent l'essayer par eux-mêmes. tornado dispose d'un module websocket intégré, qui peut prendre en charge l'utilisation de websockets plus facilement.

6. Résumé

Websocket fournit une communication de données bidirectionnelle à faible latence et hautes performances. Différent des modes de demande, de traitement et d'attente de réponse du développement Web, il s'agit d'un mode dans lequel le client et le serveur peuvent se transmettre directement des données car de la même connexion. Il est particulièrement adapté au développement d'applications pour l'interaction de données en temps réel.

Points pratiques :

1. Une fois la connexion Websocket établie, la transmission de données ultérieure sera transmise sous forme de séquence de trames ;

2. Avant que le client ne déconnecte la connexion Websocket ou que le serveur n'interrompe la connexion, le client et le serveur n'ont pas besoin de relancer la demande de connexion ;

3. Dans le cas d'une concurrence massive et d'une charge d'interaction élevée entre le client et le serveur, cela économise la consommation des ressources de bande passante du réseau, et le client envoie et reçoit des messages sur la même connexion persistante, réalisant ainsi une « véritable connexion longue », véritablement réaliser une communication instantanée.

Auteur : JD Logistics Luo Tonglei

Source : JD Cloud Developer Community Ziyuanqishuo Tech Veuillez indiquer la source lors de la réimpression

WebSocket Magician : possibilités illimitées pour créer des applications en temps réel | Équipe technologique de JD Logistics