` for incoming messages:
+
+```html
+
+
+
+
+
+```
+
+Javascript is also simple. We open a socket, then on form submission -- `socket.send(message)`, on incoming message -- append it to `div#messages`:
+
+```js
+let socket = new WebSocket("wss://javascript.info/article/websocket/chat/ws");
+
+// send message from the form
document.forms.publish.onsubmit = function() {
- var outgoingMessage = this.message.value;
+ let outgoingMessage = this.message.value;
socket.send(outgoingMessage);
return false;
};
-// обработчик входящих сообщений
+// show message in div#messages
socket.onmessage = function(event) {
- var incomingMessage = event.data;
- showMessage(incomingMessage);
-};
+ let message = event.data;
-// показать сообщение в div#subscribe
-function showMessage(message) {
- var messageElem = document.createElement('div');
- messageElem.appendChild(document.createTextNode(message));
- document.getElementById('subscribe').appendChild(messageElem);
+ let messageElem = document.createElement('div');
+ messageElem.textContent = message;
+ document.getElementById('messages').prepend(messageElem);
}
```
-Серверный код можно писать на любой платформе. В нашем случае это будет Node.JS, с использованием модуля [ws](https://github.com/websockets/ws):
+Server-side code is a little bit beyound our scope here. We're using browser WebSocket API, a server may have another library.
+
+Still it can also be pretty simple. We'll use Node.JS with
module for websockets.
+
+The algorithm will be:
+1. Create `clients = new Set()` -- a set of sockets.
+2. For each accepted websocket, `clients.add(socket)` and listen for its messages.
+3. When a message received: iterate over clients and send it to everyone.
+4. When a connection is closed: `clients.delete(socket)`.
```js
-var WebSocketServer = new require('ws');
+const ws = new require('ws');
+const wss = new ws.Server({noServer: true});
-// подключенные клиенты
-var clients = {};
+const clients = new Set();
-// WebSocket-сервер на порту 8081
-var webSocketServer = new WebSocketServer.Server({
- port: 8081
+http.createServer((req, res) => {
+ // in real project we have additional code here to handle non-websocket requests
+ wss.handleUpgrade(req, req.socket, Buffer.alloc(0), onSocketConnect);
});
-webSocketServer.on('connection', function(ws) {
- var id = Math.random();
- clients[id] = ws;
- console.log("новое соединение " + id);
+function onSocketConnect(ws) {
+ clients.add(ws);
ws.on('message', function(message) {
- console.log('получено сообщение ' + message);
+ message = message.slice(0, 50); // max message length will be 50
- for (var key in clients) {
- clients[key].send(message);
+ for(let client of clients) {
+ client.send(message);
}
});
ws.on('close', function() {
- console.log('соединение закрыто ' + id);
- delete clients[id];
+ clients.delete(ws);
});
-
-});
+}
```
-Рабочий пример можно скачать: [websocket.zip](websocket.zip). Понадобится поставить два модуля: `npm install node-static && npm install ws`.
-## Итого
-WebSocket -- современное средство коммуникации. Кросс-доменное, универсальное, безопасное.
+Here's the working example:
-На текущий момент он работает в браузерах IE10+, FF11+, Chrome 16+, Safari 6+, Opera 12.5+. В более старых версиях FF, Chrome, Safari, Opera есть поддержка черновых редакций протокола.
+[iframe src="chat" height="100" zip]
-Там, где вебсокеты не работают -- обычно используют другие транспорты, например `IFRAME`. Вы найдёте их в других статьях этого раздела.
-
-Есть и готовые библиотеки, реализующие функционал COMET с использованием сразу нескольких транспортов, из которых вебсокет имеет приоритет. Как правило, библиотеки состоят из двух частей: клиентской и серверной.
-
-Например, для Node.JS одной из самых известных библиотек является [Socket.IO](http://socket.io).
-
-К недостаткам библиотек следует отнести то, что некоторые продвинутые возможности WebSocket, такие как двухсторонний обмен бинарными данными, в них недоступны. С другой -- в большинстве случаев стандартного текстового обмена вполне достаточно.
+You can also download it (upper-right button in the iframe) and run locally. Just don't forget to install [Node.js](https://nodejs.org/en/) and `npm install ws` before running.
-========
+## Summary
-In this simple example, the bufferedAmount attribute is used to ensure that updates are sent either at the rate of one update every 50ms, if the network can handle that rate, or at whatever rate the network can handle, if that is too fast.
+WebSocket is a modern way to have persisten browser-server connections.
-var socket = new WebSocket('ws://game.example.com:12010/updates');
-socket.onopen = function () {
- setInterval(function() {
- if (socket.bufferedAmount == 0)
- socket.send(getUpdateData());
- }, 50);
-};
-The bufferedAmount attribute can also be used to saturate the network without sending the data at a higher rate than the network can handle, though this requires more careful monitoring of the value of the attribute over time.
+- WebSockets don't have cross-origin limitations.
+- They are well-supported in browsers.
+- Can send/receive strings and binary data.
+The API is simple.
-=====
+Methods:
+- `socket.send(data)`,
+- `socket.close([code], [reason])`.
-https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
+Events:
+- `open`,
+- `message`,
+- `error`,
+- `close`.
+
+WebSocket by itself does not include reconnection, authentication and many other high-level mechanisms. So there are client/server libraries add them. But it's also possible to implement these manually and integrate WebSockets with an existing site.
+
+For integration purposes, a WebSocket server is usually running in parallel with the main server, and they share a single database. Requests to WebSocket use `wss://ws.site.com`, a subdomain that leads to WebSocket server, while `https://site.com` goes to the main HTTP-server.
+
+Surely, other ways of integration are also possible. Many servers (such as Node.js) can support both HTTP and WebSocket protocols.
diff --git a/7-network/08-websocket/chat.view/index.html b/7-network/08-websocket/chat.view/index.html
new file mode 100644
index 00000000..3dd4c24c
--- /dev/null
+++ b/7-network/08-websocket/chat.view/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
diff --git a/7-network/08-websocket/chat.view/server.js b/7-network/08-websocket/chat.view/server.js
new file mode 100644
index 00000000..d21973fc
--- /dev/null
+++ b/7-network/08-websocket/chat.view/server.js
@@ -0,0 +1,61 @@
+/**
+Before running:
+> npm install ws
+Then:
+> node server.js
+> open http://localhost:8080 in the browser
+*/
+
+const http = require('http');
+const fs = require('fs');
+const ws = new require('ws');
+
+const wss = new ws.Server({noServer: true});
+
+const clients = new Set();
+
+function accept(req, res) {
+
+ if (req.url == '/ws' && req.headers.upgrade &&
+ req.headers.upgrade.toLowerCase() == 'websocket' &&
+ // can be Connection: keep-alive, Upgrade
+ req.headers.connection.match(/\bupgrade\b/i)) {
+ wss.handleUpgrade(req, req.socket, Buffer.alloc(0), onSocketConnect);
+ } else if (req.url == '/') { // index.html
+ fs.createReadStream('./index.html').pipe(res);
+ } else { // page not found
+ res.writeHead(404);
+ res.end();
+ }
+}
+
+function onSocketConnect(ws) {
+ clients.add(ws);
+ log(`new connection`);
+
+ ws.on('message', function(message) {
+ log(`message received: ${message}`);
+
+ message = message.slice(0, 50); // max message length will be 50
+
+ for(let client of clients) {
+ client.send(message);
+ }
+ });
+
+ ws.on('close', function() {
+ log(`connection closed`);
+ clients.delete(ws);
+ });
+}
+
+let log;
+if (!module.parent) {
+ log = console.log;
+ http.createServer(accept).listen(8080);
+} else {
+ // to embed into javascript.info
+ log = function() {};
+ // log = console.log;
+ exports.accept = accept;
+}
diff --git a/7-network/08-websocket/demo.view/server.js b/7-network/08-websocket/demo.view/server.js
index eab159e2..7b17734d 100644
--- a/7-network/08-websocket/demo.view/server.js
+++ b/7-network/08-websocket/demo.view/server.js
@@ -1,34 +1,24 @@
-const Koa = require('koa');
-const app = new Koa();
+const http = require('http');
const ws = require('ws');
-const Router = require('koa-router');
-let router = new Router();
+const wss = new ws.Server({noServer: true});
-const wss = new ws.Server({noServer: true})
+function accept(req, res) {
+ // all incoming requests must be websockets
+ if (!req.headers.upgrade || req.headers.upgrade.toLowerCase() != 'websocket') {
+ res.end();
+ return;
+ }
+ // can be Connection: keep-alive, Upgrade
+ if (req.headers.connection.match(/\bupgrade\b/i)) {
+ res.end();
+ return;
+ }
-router.get('/hello', handleWebsocket(hello));
-
-
-function handleWebsocket(handler) {
- return async (ctx, next) => {
-
- const upgradeHeader = (ctx.request.headers.upgrade || '').split(',').map(s => s.trim())
-
- // console.log(`websocket middleware called on route ${ctx.path}`);
- // console.log(ctx.request.headers);
- // console.log(upgradeHeader);
-
- if (upgradeHeader.includes('websocket')) {
- ctx.respond = false;
- wss.handleUpgrade(ctx.req, ctx.request.socket, Buffer.alloc(0), handler);
- } else {
- await next();
- }
- };
+ wss.handleUpgrade(req, req.socket, Buffer.alloc(0), onConnect);
}
-async function hello(ws) {
+function onConnect(ws) {
ws.on('message', function (message) {
let name = message.match(/\w+$/) || "Guest";
ws.send(`Hello, ${name}!`);
@@ -37,12 +27,8 @@ async function hello(ws) {
});
}
-app
- .use(router.routes())
- .use(router.allowedMethods());
-
if (!module.parent) {
- http.createServer(app.callback()).listen(8080);
+ http.createServer(accept).listen(8080);
} else {
- exports.accept = app.callback();
+ exports.accept = accept;
}
diff --git a/7-network/08-websocket/websocket-handshake.png b/7-network/08-websocket/websocket-handshake.png
new file mode 100644
index 00000000..2ee89b45
Binary files /dev/null and b/7-network/08-websocket/websocket-handshake.png differ
diff --git a/7-network/08-websocket/websocket-handshake@2x.png b/7-network/08-websocket/websocket-handshake@2x.png
new file mode 100644
index 00000000..4ce3b3a2
Binary files /dev/null and b/7-network/08-websocket/websocket-handshake@2x.png differ
diff --git a/7-network/08-websocket/websocket.zip b/7-network/08-websocket/websocket.zip
deleted file mode 100644
index 65190ec3..00000000
Binary files a/7-network/08-websocket/websocket.zip and /dev/null differ
diff --git a/figures.sketch b/figures.sketch
index 341a50fb..20e01c5b 100644
Binary files a/figures.sketch and b/figures.sketch differ