Пример чата с веб-сокетом

{"blocks":[{"type":"paragraph","data":{"text":"Веб-сокеты (Web Sockets) — это передовая технология, которая позволяет создавать интерактивное соединение между клиентом (браузером) и сервером для обмена сообщениями в режиме реального времени. Веб-сокеты, в отличие от HTTP, позволяют работать с двунаправленным потоком данных, что делает эту технологию совершенно уникальной. Давайте разберемся, как работает эта технология и чем она отличается от HTTP."}},{"type":"header2","data":{"level":2,"text":"Как работает HTTP?"}},{"type":"image","data":{"file":{"id":41437,"url":"https://media.tproger.ru/uploads/2017/05/OeZDmUNOMec.jpg"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":1374,"height":878,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2017/05/OeZDmUNOMec.jpg","alt":"Асинхронный веб, или Что такое веб-сокеты 1","dimensions":{"width":1374,"height":878},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/l49_BXqQeSwYyldViyYSAUURuKLnbXHGFzTV699mQKY/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9PZVpEbVVOT01lYy5qcGc","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/KPQ4jxCImqXEVpTIEf1lG9RDI6gwjiVP3H5uhe0-iv0/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9PZVpEbVVOT01lYy5qcGc","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/rfLvfj4B7whPLLbETsYKgADums5Hx34WDoX8ftiv4tM/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9PZVpEbVVOT01lYy5qcGc","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/bQ9q0sYQyvIwqh4nkx4Yg37FLSLwXFqPTMRQU7NJuCQ/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9PZVpEbVVOT01lYy5qcGc","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/TzLrDhsv9SNfKKW28qdcuq2JwfWv1voTgA9sQ8W97sU/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9PZVpEbVVOT01lYy5qcGc","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/WxSSQKrpzGX1B2UbRY1UzOPbvyu34ABAW2xM7qB2otU/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9PZVpEbVVOT01lYy5qcGc","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/1exEkqVC0uh6shm25xVvh867G7v0mHlT_m6GnFspPk8/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9PZVpEbVVOT01lYy5qcGc","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/69Galm4ZfUWcPdnTE8ij1gOZRRqc7ifqWvgK6eR5Naw/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9PZVpEbVVOT01lYy5qcGc","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"type":"paragraph","data":{"text":"Вы наверняка знаете, что такое HTTP (или HTTPS), поскольку встречаетесь с этим протоколом каждый день в своём браузере. Браузер постоянно спрашивает у сервера, есть ли для него новые сообщения, и получает их."}},{"type":"paragraph","data":{"text":"Вы также можете знать, что HTTP позволяет использовать разные типы запросов, такие как POST, GET или PUT, каждый из которых имеет своё назначение."}},{"type":"header2","data":{"level":2,"text":"Как работают веб-сокеты?"}},{"type":"image","data":{"file":{"id":41439,"url":"https://media.tproger.ru/uploads/2017/05/nejJ2jV8c3o.jpg"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":800,"height":488,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2017/05/nejJ2jV8c3o.jpg","alt":"Асинхронный веб, или Что такое веб-сокеты 2","dimensions":{"width":800,"height":488},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/KbVKBsaUoKa2zMDgJ4uT9-YzmrDaFXD2Vtjc4r33JfE/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9uZWpKMmpWOGMzby5qcGc","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/dn1OnAPI17cbuyjRIgXRuBShrZIYVqjP8_UWJW_VlB4/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9uZWpKMmpWOGMzby5qcGc","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/DsxTy7ZRAYYROXhl5Zo6P8i4hokgy5dxb8ZmXvhvKts/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9uZWpKMmpWOGMzby5qcGc","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/6X3XEmy1wJSJ5cE3fpqWcEMVkc9iUWCR0wahk5X1MPE/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9uZWpKMmpWOGMzby5qcGc","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/Jk5i_2-G6QqX73F-alCpjNSq8bIsk-HD8qFu6ilo3Ms/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9uZWpKMmpWOGMzby5qcGc","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/Xgh7MmuN82PrzzP3_OLWw_2vH1zpeEmkDScfZlMuoV4/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9uZWpKMmpWOGMzby5qcGc","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/Qj3fRhylKYCiTFs_0tnAkc1TRFbCcn8S4_XPFxoTX8M/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9uZWpKMmpWOGMzby5qcGc","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/3oh4J2Qq6LbjevxauNCBwti5cvowK90efpbo8rpT_7A/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNS9uZWpKMmpWOGMzby5qcGc","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"type":"paragraph","data":{"text":"Веб-сокетам же для ответа не нужны ваши повторяющиеся запросы. Достаточно выполнить один запрос и ждать отклика. Вы можете просто слушать сервер, который будет отправлять вам сообщения по мере готовности."}},{"type":"paragraph","data":{"text":"Веб-сокеты можно использовать, если вы разрабатываете:"}},{"type":"list","data":{"items":["приложения реального времени;","чат-приложения;","IoT-приложения;","многопользовательские игры."],"style":"unordered"}},{"type":"header2","data":{"level":2,"text":"Когда следует избегать использования веб-сокетов?"}},{"type":"paragraph","data":{"text":"Практически никогда. Единственный минус — это несовместимость с некоторыми браузерами, но уже 95 % браузеров поддерживают веб-сокеты."}},{"type":"paragraph","data":{"text":"В некоторых случаях веб-сокеты вам всё же не понадобятся. Если вы создаёте простую CMS, вам вряд ли пригодится функциональность в режиме реального времени. Также не стоит использовать веб-сокеты в REST API, поскольку вам хватит таких HTTP-запросов, как GET, POST, DELETE и PUT."}},{"type":"header2","data":{"level":2,"text":"Практические примеры"}},{"type":"paragraph","data":{"text":"В примерах ниже для клиента используется JavaScript, а для сервера — Node.js. Примеры очень просты и вряд ли пригодятся на практике, но зато позволят разобраться в сути."}},{"type":"header3","data":{"level":3,"text":"Веб-сокеты"}},{"type":"paragraph","data":{"text":"Клиент:"}},{"type":"code","data":{"code":"\r\n\r\n\r\n Пример чата с веб-сокетом\r\n\r\n\r\n \r\n\r\n","language":"html lazy-code"}},{"type":"paragraph","data":{"text":"Сервер:"}},{"type":"code","data":{"code":"const WebSocket = require('ws');\r\n\r\n// создаём новый websocket-сервер\r\nconst wss = new WebSocket.Server({\r\n port: 8080\r\n});\r\n\r\n// отправляем клиентам, когда функция clientValidator возвращает true. this — это wss.\r\nwss.broadcast = function(data, clientValidator = () => true) {\r\n this.clients.forEach(client => {\r\n if (clientValidator(client)) {\r\n client.send(data);\r\n }\r\n });\r\n}\r\n\r\nwss.on(\"connection\", ws => {\r\n // событие будет вызвано, когда клиент отправит сообщение\r\n ws.on('message', message => {\r\n // отправляем сообщение всем, кроме автора\r\n wss.broadcast(message, client => client !== ws);\r\n });\r\n});","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Вот иллюстрация работы веб-сокетов:"}},{"type":"image","data":{"file":{"id":41447,"url":"https://media.tproger.ru/uploads/2017/05/1-GnRBuOtkxICDBJOb709HA.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":800,"height":586}},{"type":"header3","data":{"level":3,"text":"Эквивалент в HTTP"}},{"type":"paragraph","data":{"text":"Так как HTTP должен постоянно проверять канал на наличие новых сообщений, можно использовать «грязную» проверку (dirty check) — подход, при котором клиент с заданной периодичностью (допустим, каждые 200 мс) проверяет наличие новых сообщений на сервере."}},{"type":"paragraph","data":{"text":"Чтобы не вникать в XMLHttpRequest, можно использовать библиотеку Axios. Она декларативна и очень понятна."}},{"type":"paragraph","data":{"text":"Клиент:"}},{"type":"code","data":{"code":"\r\n\r\n\r\n Обмен сообщениями в режиме реального времени\r\n\r\n\r\n \r\n \r\n\r\n","language":"clike lazy-code"}},{"type":"paragraph","data":{"text":"Сервер:"}},{"type":"code","data":{"code":"const express = require('express');\r\nconst bodyParser = require('body-parser');\r\nconst app = express();\r\n\r\napp.use(bodyParser.json(), function(req, res, next) {\r\n res.header(\"Access-Control-Allow-Origin\", \"*\");\r\n res.header(\"Access-Control-Allow-Headers\", \"Origin, X-Requested-With, Content-Type, Accept\");\r\n next();\r\n});\r\n\r\n// в реальном приложении сообщения хранились бы в базе данных или, в некоторых случаях, в JSON-файлах,\r\n// а не в переменной, которая обнуляется при остановке сервера\r\nlet messages = [];\r\n\r\n// создаем новое сообщение\r\napp.post('/messages', (req, res) => {\r\n messages.push(req.body.text);\r\n res.json({\r\n success: true\r\n });\r\n});\r\n\r\n// получаем все сообщения\r\napp.get('/messages', (req, res) => {\r\n res.json({\r\n messages\r\n });\r\n});\r\n\r\n// слушаем все запросы на localhost: 8080.\r\napp.listen(8080, () => console.log('Слушаю порт 8080'));","language":"clike lazy-code"}},{"type":"header2","data":{"level":2,"text":"Заключение"}},{"type":"paragraph","data":{"text":"Веб-сокеты являются одной из самых перспективных веб-технологий, которую уже сейчас используют многие разработчики. Она отлично подходит для взаимодействия в режиме реального времени, в том числе в онлайн-играх."}}]}

Ошибка в настройках сайта