Веб-сокет в NodeJS

Опубликовано: 6 Августа, 2021

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

 npm install socket.io --save
 npm install express --save

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

javascript

 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 ('соединение', (сокет) => {
  console.log ('Подключен новый пользователь');
});

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

javascript

<script src="/socket.io/socket.io.js"></script>
<script>
var socket=io()
// make connection with server from user side
socket.on("connect", function(){
  console.log("Connected to Server")
 
});
</script>

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

javascript

 // listener when server emit any message
 socket.on( 'createMessage' , (newMessage)=>{
    console.log( 'newMessage' , newMessage);
  })

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

javascript

 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);

Выход:

Пример кода на стороне клиента:

javascript

 <!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>

Выход:

Node.js JavaScript

Веб-сокет в NodeJS

javascript

javascript

javascript

javascript

javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ