updates

2019-07-03 17:19:00 +03:00 · 2019-07-03 17:19:00 +03:00 · cc5213b09e
commit cc5213b09e
parent 94c83e9e50
79 changed files with 1341 additions and 357 deletions
--- a/5-network/11-websocket/chat.view/index.html
+++ b/5-network/11-websocket/chat.view/index.html
@ -0,0 +1,39 @@
+<!doctype html>
+<form name="publish">
+  <input type="text" name="message" maxlength="50"/>
+  <input type="submit" value="Send"/>
+</form>
+
+<div id="messages"></div>
+
+<script>
+let url = location.host == 'localhost' ?
+  'ws://localhost:8080/ws' : location.host == 'javascript.local' ?
+  `ws://javascript.local/article/websocket/chat/ws` : // dev integration with local site
+  `wss://javascript.info/article/websocket/chat/ws`; // prod integration with javascript.info
+
+let socket = new WebSocket(url);
+
+// send message from the form
+document.forms.publish.onsubmit = function() {
+  let outgoingMessage = this.message.value;
+
+  socket.send(outgoingMessage);
+  return false;
+};
+
+// handle incoming messages
+socket.onmessage = function(event) {
+  let incomingMessage = event.data;
+  showMessage(incomingMessage);
+};
+
+socket.onclose = event => console.log(`Closed ${event.code}`);
+
+// show message in div#messages
+function showMessage(message) {
+  let messageElem = document.createElement('div');
+  messageElem.textContent = message;
+  document.getElementById('messages').prepend(messageElem);
+}
+</script>
--- a/5-network/11-websocket/chat.view/server.js
+++ b/5-network/11-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;
+}