Веб-сокеты в NodeJS (WebSocket)

Что такое веб-сокет?

Web Socket - это протокол, который обеспечивает полнодуплексную (многостороннюю) связь, то есть позволяет осуществлять связь в обоих направлениях одновременно. Это современная веб-технология, в которой между браузером пользователя (клиентом) и сервером существует постоянное соединение. В этом типе связи между веб-сервером и веб-браузером они оба могут отправлять сообщения друг другу в любой момент времени. Традиционно в сети у нас был формат запроса/ответа, в котором пользователь отправляет HTTP-запрос, а сервер на него отвечал. Это все еще применимо в большинстве случаев, особенно при использовании RESTful API. Но ощущалась потребность в том, чтобы сервер также общался с клиентом, не получая ответа (или запроса) от клиента. Сервер сам по себе должен иметь возможность отправлять информацию клиенту или браузеру. Именно здесь на сцену выходит Web Socket.

Чтобы использовать Socket в NodeJS, нам сначала нужно установить зависимость, которая называется socket.io. Мы можем просто установить его, выполнив команду ниже в cmd, а затем добавить эту зависимость в файл javascript на стороне сервера, а также установить экспресс-модуль, который в основном требуется для серверного приложения.

npm install socket.io --save
npm install express - сохранить

Примечание: npm в приведенных выше командах означает диспетчер пакетов узлов, место, откуда мы устанавливаем все зависимости. Флаг --save больше не нужен после версии Node 5.0.0, так как все модули, которые мы сейчас устанавливаем, будут добавлены в зависимости.

Пишем серверный код:

const express = require('express'); // using express
const socketIO = require('socket.io');
const http = require('http') 
const port = process.env.PORT||3000 // setting the port 
let app = express();
let server = http.createServer(app)
let io = socketIO(server)
  
server.listen(port);

Теперь нам нужно установить соединение со стороны сервера на сторону клиента, через которое сервер сможет отправлять данные клиенту.

// устанавливаем соединение с пользователем со стороны сервера
io.on('connection', (socket) => {
  console.log('New user connected');
});

Точно так же со стороны клиента нам нужно добавить файл сценария, а затем установить соединение с сервером, через который пользователь отправляет данные на сервер.

<script src="/socket.io/socket.io.js"></script>
<script>
var socket=io()
// устанавливаем соединение с сервером со стороны пользователя
socket.on('connect', function() {
  console.log('Connected to Server')
});
</script>

Теперь, чтобы отправить сообщение или данные с сервера пользователю, мы создаем сокет socket.on() внутри соединения, которое мы сделали со стороны сервера.

// cлушатель, который срабатывает когда сервер отправляет какое-либо сообщение
socket.on('createMessage', (newMessage) => {
  console.log('newMessage', newMessage);
})

Теперь любые данные могут быть отправлены с любой стороны, так что между сервером и клиентом создается соединение. Затем, если сервер отправляет сообщение, клиент может прослушать это сообщение или, если клиент отправляет сообщение, сервер может прослушать это сообщение. Таким образом, мы должны сгенерировать сокет для отправки и прослушивания сообщений как на сервере, так и на стороне клиента.

Пример серверного кода:

const express=require('express');
const socketIO=require('socket.io');
const http=require('http')
const port=process.env.PORT||3000
var app=express();
var io=socketIO(server);
  
// make connection with user from server side
io.on('connection', (socket)=>{
  console.log('New user connected');
   //emit message from server to user
   socket.emit('newMessage', {
     from:'jen@mds',
     text:'hepppp',
     createdAt:123
   });
  
  // listen for message from user
  socket.on('createMessage', (newMessage)=>{
    console.log('newMessage', newMessage);
  });
  
  // when server disconnects from user
  socket.on('disconnect', ()=>{
    console.log('disconnected from user');
  });
});
  
server.listen(port);

Вывод

Подключен новый пользователь
{
  кому: 'john @ ds',
  текст: 'what kjkljd'
}

Пишем клиентский код:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  
    <title>ChatApp</title>
  </head>
  <body class="chat">
        <form id='message-form'>
          <input name='message' type="text"placeholder="Message"
                  autofocus autocomplete="off"/>
          <button >Send</button>
        </form>
  
<script src="/socket.io/socket.io.js"></script>
<script>
var socket=io()
  
// connection with server
socket.on('connect', function(){
  console.log('Connected to Server')
  
});
  
// message listener from server
socket.on('newMessage', function(message){
 console.log(message);
});
  
// emits message from user side
socket.emit('createMessage', {
  to:'john@ds',
  text:'what kjkljd'
});
  
// when disconnected from server
socket.on('disconnect', function(){
  console.log('Disconnect from server')
});
</script>
  </body>
</html>

Вывод:

Connected to Server
{
     from:'jen@mds',
     text:'hepppp',
     createdAt:123
}