You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 5-network/11-websocket/article.md
+1-64Lines changed: 1 addition & 64 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,6 @@
1
1
# WebSocket
2
2
3
-
<<<<<<< HEAD
4
3
Le protocole `WebSocket`, décrit dans la spécification [RFC 6455](https://datatracker.ietf.org/doc/html/rfc6455) fournit un moyen d'échanger des données entre le navigateur et le serveur via une connexion persistante. Les données peuvent être transmises dans les deux sens sous forme de "paquets", sans interrompre la connexion et de requêtes HTTP supplémentaires.
5
-
=======
6
-
The `WebSocket` protocol, described in the specification [RFC 6455](https://datatracker.ietf.org/doc/html/rfc6455), provides a way to exchange data between browser and server via a persistent connection. The data can be passed in both directions as "packets", without breaking the connection and the need of additional HTTP-requests.
7
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
8
4
9
5
WebSocket est particulièrement adapté aux services qui nécessitent un échange de données continu, par exemple jeux en ligne, systèmes de trading en temps réel, etc.
10
6
@@ -23,11 +19,7 @@ Le protocole `wss://` est non seulement chiffré, mais également plus fiable.
23
19
24
20
C'est parce que les données `ws://` ne sont pas chiffrées, par conséquent visibles pour tout intermédiaire. Les anciens serveurs proxy ne connaissent pas WebSocket, ils peuvent voir des en-têtes "étranges" et abandonner la connexion.
25
21
26
-
<<<<<<< HEAD
27
22
D'un autre côté, `wss://` est WebSocket sur TLS, (comme HTTPS est HTTP sur TLS), la couche de sécurité de transport chiffre les données à l'expéditeur et déchiffre au récepteur. Les paquets de données sont donc transmis chiffrés via des proxys. Ils ne peuvent pas voir ce qu'il y a à l'intérieur et les laisser passer.
28
-
=======
29
-
On the other hand, `wss://` is WebSocket over TLS, (same as HTTPS is HTTP over TLS), the transport security layer encrypts the data at the sender and decrypts it at the receiver. So data packets are passed encrypted through proxies. They can't see what's inside and let them through.
30
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
31
23
```
32
24
33
25
Une fois le socket créé, nous devons écouter les événements qu'il contient. Il y a au total 4 événements :
@@ -80,19 +72,11 @@ Approfondissont maintenant.
80
72
81
73
Lorsque `new WebSocket(url)` est créé, il se connecte immédiatement.
82
74
83
-
<<<<<<< HEAD
84
75
Lors de la connexion, le navigateur (à l'aide des en-têtes) demande au serveur: "Prenez-vous en charge Websocket ?" Et si le serveur répond "oui", alors la conversation se poursuit dans le protocole WebSocket, qui n'est pas du tout HTTP.
85
76
86
77

87
78
88
79
Voici un exemple d'en-têtes de navigateur pour une demande faite par `new WebSocket("wss://javascript.info/chat")`.
89
-
=======
90
-
During the connection, the browser (using headers) asks the server: "Do you support Websocket?" And if the server replies "yes", then the talk continues in WebSocket protocol, which is not HTTP at all.
91
-
92
-

93
-
94
-
Here's an example of browser headers for a request made by `new WebSocket("wss://javascript.info/chat")`.
-`Origin` -- l'origine de la page client, par exemple `https://javascript.info`. Les objets WebSocket sont cross-origin par nature. Il n'y a pas d'en-têtes spéciaux ou d'autres limitations. Les anciens serveurs ne sont pas en mesure de gérer WebSocket de toute façon, il n'y a donc pas de problème de compatibilité. Mais l'en-tête `Origin` est important, car il permet au serveur de décider de discuter ou non en WebSocket avec ce site Web.
109
92
-`Connection: Upgrade` -- indique que le client souhaite modifier le protocole.
110
93
-`Upgrade: websocket` -- le protocole demandé est "websocket".
111
94
-`Sec-WebSocket-Key` -- une clé générée aléatoirement par le navigateur pour la sécurité.
112
95
-`Sec-WebSocket-Version` -- Version du protocole WebSocket, 13 est la version actuelle.
113
-
=======
114
-
-`Origin` -- the origin of the client page, e.g. `https://javascript.info`. WebSocket objects are cross-origin by nature. There are no special headers or other limitations. Old servers are unable to handle WebSocket anyway, so there are no compatibility issues. But the `Origin` header is important, as it allows the server to decide whether or not to talk WebSocket with this website.
115
-
-`Connection: Upgrade` -- signals that the client would like to change the protocol.
116
-
-`Upgrade: websocket` -- the requested protocol is "websocket".
117
-
-`Sec-WebSocket-Key` -- a random browser-generated key, used to ensure that the server supports WebSocket protocol. It's random to prevent proxies from caching any following communication.
118
-
-`Sec-WebSocket-Version` -- WebSocket protocol version, 13 is the current one.
119
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
120
96
121
97
```smart header="Le handshake WebSocket ne peut pas être émulé"
122
98
Nous ne pouvons pas utiliser `XMLHttpRequest` ou` fetch` pour effectuer ce type de requête HTTP, car JavaScript n'est pas autorisé à définir ces en-têtes.
Ici `Sec-WebSocket-Accept` est `Sec-WebSocket-Key`, recodé à l'aide d'un algorithme spécial. Le navigateur l'utilise pour s'assurer que la réponse correspond à la requête.
110
+
Ici `Sec-WebSocket-Accept` est `Sec-WebSocket-Key`, recodé à l'aide d'un algorithme spécial. En le voyant, le navigateur comprend que le serveur prend réellement en charge le protocole WebSocket.
136
111
137
112
Ensuite, les données sont transférées en utilisant le protocole WebSocket, nous verrons bientôt sa structure ("frames"). Et ce n'est pas du tout HTTP.
138
-
=======
139
-
Here `Sec-WebSocket-Accept` is `Sec-WebSocket-Key`, recoded using a special algorithm. Upon seeing it, the browser understands that the server really does support the WebSocket protocol.
140
-
141
-
Afterwards, the data is transferred using the WebSocket protocol, we'll see its structure ("frames") soon. And that's not HTTP at all.
142
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
143
113
144
114
### Extensions et sous-protocoles
145
115
146
116
Il peut y avoir des en-têtes supplémentaires `Sec-WebSocket-Extensions` et `Sec-WebSocket-Protocol` qui décrivent les extensions et les sous-protocoles.
147
117
148
118
Par exemple :
149
119
150
-
<<<<<<< HEAD
151
120
-`Sec-WebSocket-Extensions: deflate-frame` signifie que le navigateur prend en charge la compression des données. Une extension est liée au transfert des données, c'est une fonctionnalité qui étend le protocole WebSocket. L'en-tête `Sec-WebSocket-Extensions` est envoyé automatiquement par le navigateur, avec la liste de toutes les extensions qu'il prend en charge.
152
121
153
122
-`Sec-WebSocket-Protocol: soap, wamp` signifie que nous aimerions transférer non seulement toutes les données, mais les données [SOAP](http://en.wikipedia.org/wiki/SOAP) ou les protocoles WAMP ("The WebSocket Application Messaging Protocol"). Les sous-protocoles WebSocket sont enregistrés dans le [catalogue IANA](http://www.iana.org/assignments/websocket/websocket.xml). Donc, cet en-tête décrit les formats de données que nous allons utiliser.
154
-
=======
155
-
-`Sec-WebSocket-Extensions: deflate-frame` means that the browser supports data compression. An extension is something related to transferring the data, functionality that extends the WebSocket protocol. The header `Sec-WebSocket-Extensions` is sent automatically by the browser, with the list of all extensions it supports.
156
-
157
-
-`Sec-WebSocket-Protocol: soap, wamp` means that we'd like to transfer not just any data, but the data in [SOAP](https://en.wikipedia.org/wiki/SOAP) or WAMP ("The WebSocket Application Messaging Protocol") protocols. WebSocket subprotocols are registered in the [IANA catalogue](https://www.iana.org/assignments/websocket/websocket.xml). So, this header describes the data formats that we're going to use.
158
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
159
123
160
124
Cet en-tête facultatif est défini à l'aide du deuxième paramètre de `new WebSocket`. C'est le tableau des sous-protocoles, par exemple si nous souhaitons utiliser SOAP ou WAMP :
161
125
@@ -209,11 +173,7 @@ Dans le navigateur, nous travaillons directement uniquement avec du texte ou des
209
173
210
174
**La méthode WebSocket `.send()` peut envoyer du texte ou des données binaires.**
211
175
212
-
<<<<<<< HEAD
213
176
Un appel `socket.send(body)` autorise `body` dans une chaîne de caractères ou un format binaire, y compris `Blob`, `ArrayBuffer`, etc. Aucun paramètre requis : il suffit de l'envoyer dans n'importe quel format.
214
-
=======
215
-
A call `socket.send(body)` allows `body` in string or a binary format, including `Blob`, `ArrayBuffer`, etc. No settings are required: just send it out in any format.
216
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
217
177
218
178
**Lorsque nous recevons les données, le texte vient toujours sous forme de chaîne de caractères. Et pour les données binaires, nous pouvons choisir entre les formats `Blob` et `ArrayBuffer`.**
-`code` est un code de fermeture WebSocket spécial (facultatif)
262
222
-`reason` est une chaîne de caractères qui décrit la raison de la fermeture (facultatif)
263
223
264
-
<<<<<<< HEAD
265
224
Ensuite, l'autre partie du gestionnaire d'événements `close` obtient le code et la raison, par exemple :
266
-
=======
267
-
Then the other party in the `close` event handler gets the code and the reason, e.g.:
268
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
269
225
270
226
```js
271
227
// partie fermante :
@@ -293,11 +249,7 @@ Il existe d'autres codes comme :
293
249
294
250
La liste complète se trouve dans le [RFC6455, §7.4.1](https://tools.ietf.org/html/rfc6455#section-7.4.1).
295
251
296
-
<<<<<<< HEAD
297
252
Les codes WebSocket sont un peu comme les codes HTTP, mais différents. En particulier, tous les codes inférieurs à `1000` sont réservés, il y aura une erreur si nous essayons de définir un tel code.
298
-
=======
299
-
WebSocket codes are somewhat like HTTP codes, but different. In particular, codes lower than `1000` are reserved, there'll be an error if we try to set such a code.
300
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
301
253
302
254
```js
303
255
// en cas de rupture de connexion
@@ -368,17 +320,10 @@ Le code côté serveur dépasse un peu notre portée. Ici, nous utiliserons Node
368
320
369
321
L'algorithme côté serveur sera :
370
322
371
-
<<<<<<< HEAD
372
323
1. Créer `clients = new Set()`-- un ensemble de sockets.
373
324
2. Pour chaque websocket accepté, l'ajouter à l'ensemble `clients.add (socket)` et configurer l'écouteur d'événements `message` pour obtenir ses messages.
374
325
3. Lorsqu'un message est reçu : parcourir les clients et l'envoyer à tout le monde.
375
326
4. Lorsqu'une connexion est fermée : `clients.delete(socket)`.
376
-
=======
377
-
1. Create `clients = new Set()` -- a set of sockets.
378
-
2. For each accepted websocket, add it to the set `clients.add(socket)` and set `message` event listener to get its messages.
379
-
3. When a message is received: iterate over clients and send it to everyone.
380
-
4. When a connection is closed: `clients.delete(socket)`.
Vous pouvez également le télécharger (bouton en haut à droite dans l'iframe) et l'exécuter localement. N'oubliez pas d'installer [Node.js](https://nodejs.org/en/) et `npm install ws` avant l'exécution.
419
-
=======
420
-
You can also download it (upper-right button in the iframe) and run it locally. Just don't forget to install [Node.js](https://nodejs.org/en/) and `npm install ws` before running.
421
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
422
363
423
364
## Résumé
424
365
@@ -442,10 +383,6 @@ Les événements :
442
383
443
384
WebSocket ne comprend pas à lui seul la reconnexion, l'authentification et de nombreux autres mécanismes de haut niveau. Il existe donc des bibliothèques client / serveur pour cela, et il est également possible d'implémenter ces capacités manuellement.
444
385
445
-
<<<<<<< HEAD
446
386
Parfois, pour intégrer WebSocket dans un projet existant, les gens exécutent le serveur WebSocket en parallèle avec le serveur HTTP principal et partagent une seule base de données. Les requêtes à WebSocket utilisent `wss://ws.site.com`, un sous-domaine qui mène au serveur WebSocket, tandis que` https://site.com` va au serveur HTTP principal.
447
-
=======
448
-
Sometimes, to integrate WebSocket into existing projects, people run a WebSocket server in parallel with the main HTTP-server, and they share a single database. Requests to WebSocket use `wss://ws.site.com`, a subdomain that leads to the WebSocket server, while `https://site.com` goes to the main HTTP-server.
449
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
450
387
451
388
Certes, d'autres modes d'intégration sont également possibles.
0 commit comments