Как настроить Socket.IO с помощью приложения Demo-Chat в Node.js?
Для создания приложения чата требуется, чтобы сервер отправлял данные клиенту, но клиент также должен отвечать серверу. Это можно сделать с помощью веб-сокетов. WebSocket - это своего рода канал связи, открытый в двух направлениях.
Предпосылка:
- Node.js: это внутренняя технология JavaScript с открытым исходным кодом, выполняемая сервером. У него есть собственный менеджер пакетов npm (Node Package Manager), который позволяет легко устанавливать пакеты.
- Expess.js: это фреймворк, основанный на Node.js.
- Socket.io: обеспечивает двунаправленную связь на основе событий в реальном времени. Он работает на любой платформе, браузере или устройстве, уделяя одинаковое внимание надежности и скорости. Socket.IO построен на основе API WebSockets (на стороне клиента) и Node.js. Это один из самых зависимых от библиотеки npm.
Настройка среды: Самый первый шаг - запустить npm. Итак, создайте новый репозиторий и инициализируйте npm, используя следующие команды:
$ mkdir chatApp $ cd chatApp $ npm init
Теперь следующий шаг - установить пакеты npm, которые потребуются при создании нашего чат-приложения.
- express: фреймворк веб-приложений для Node.js.
- nodemon: (необязательно) Он используется для перезапуска нашего сервера. Если вы не хотите его устанавливать, просто перезапустите сервер, написав node app.js в терминале.
- ejs: простой язык шаблонов, позволяющий создавать разметку HTML с помощью обычного JavaScript.
- socket.io: пакет, который управляет Websocket.
Просто запустите следующие команды в своем терминале, чтобы установить вышеупомянутые пакеты:
$ npm install --save express $ npm install --save socket.io $ npm install --save ejs $ npm install - сохранить nodemon
Шаги по реализации кода:
Шаг 1. Создайте app.js
const express = require( 'express' );const app = express(); app.set( "view engine" , "ejs" );app.use(express.static( "public" )); app.get( "/" , function (req, res) { res.send( "Welcome to chat app!" );}); server = app.listen(3000); |
Если вы запустите http: // localhost: 3000 в своем браузере, вы увидите сообщение на экране, как показано ниже: 
Теперь, чтобы настроить socket.io, мы должны сначала создать объект в файле app.js, как показано ниже:
const io = require( "socket.io" )(server); io.on( 'connection' , (socket) { console.log( "New user connected" );}); |
Здесь объект io предоставит нам доступ к библиотеке socket.io. Теперь объект io прослушивает каждое подключение к нашему приложению. Каждый раз, когда новый пользователь подключается, он распечатывает следующий вывод:
Подключен новый пользователь
Теперь для создания окна для приложения чата мы создадим html-файл (на самом деле файл ejs) с именем index.ejs внутри папки представлений. С другой стороны, общая папка будет содержать файл css, а именно style.css и файл js chat.js. Это будет выглядеть так:
Теперь мы создадим маршрут, который будет отображать наш файл index.ejs, который открывает окно нашего чат-приложения.
app.get("/", function(req, res) { res.render("index.ejs");}); |
Теперь, если вы запустите http: // localhost: 3000, наше окно чата будет выглядеть так: 
Теперь мы установим socket.io на каждого клиента, который попытается подключиться к нашему серверу. Для этого нам нужно импортировать библиотеку socket.io на стороне клиента:
В конце вашего тела добавьте следующие строки:
<script src=</script><script src= "chat.js" ></script> |
Теперь создайте js-файл с именем chat.js в общей папке.
Шаг 2: Отправка и получение данных Теперь мы напишем код, который позволит нам отправлять данные, а также получать данные с сервера.
Изменение имени пользователя: Прежде всего, мы установим имя пользователя по умолчанию как что-то, скажем, «Xyz». Для этого запишите следующий код в файлы app.js и chat.js.
Имя файла: app.js
const io = require( "socket.io" )(server);io.on( 'connection' , (socket) { console.log( "New user connected" ); socket.username= "xyz" ; socket.on( 'change_username' , (data) { socket.username = data.username; });}); |
Имя файла: chat.js
$ ( function () { var message = $( "#message" ); var username = $( "#username" ); var send_message = $( "#send_message" ); var send_username = $( "#send_username" ); var chatroom = $( "#chatroom" ); send_username.click( function () { console.log(username.val()); socket.emit( 'change_username' , { username : username.val() }); });}); |
socket.emit () позволяет генерировать настраиваемые события на сервере и клиенте.
Сообщение: Для сообщений мы изменяем наши файлы, как показано ниже:
Имя файла: chat.js
$ ( function () { var message = $( "#message" ); var username = $( "#username" ); var send_message = $( "#send_message" ); var send_username = $( "#send_username" ); var chatroom = $( "#chatroom" ); send_message.click( function () { socket.emit( 'new_message' , { message : message.val() }); }); socket.on( "new_message" , (data) { console.log(data); chatroom.append( "<p class='message'>" + data.username+ ";" + data.message+ "</p>" ) }); send_username.click( function () { console.log(username.val()) socket.emit( 'change_username' , {username : username.val()}) });}); |
Имя файла: app.js
const io = require( "socket.io" )(server);io.on( 'connection' , (socket) { console.log( "New user connected" ); socket.username= "xyz" ; socket.on( 'change_username' , (data) { socket.username = data.username; }); socket.on( 'new_message' , (data) { io.socket.emit( 'new_message' , { message : data.message, username : socket.username }); });}); |
Окончательный результат нашего простого чат-приложения будет выглядеть так: 
Небольшое улучшение: мы можем еще немного добавить прослушиватель событий jQuery при вводе и отправить событие сокета с именем typing.
Он просто отображается, если кто-то набирает сообщение. Напишите следующий код в chat.js и app.js, как показано ниже:
Имя файла: chat.js
message.bind( "keypress" , () { socket.emit( 'typing' );}); socket.on( 'typing' , (data) { feedback.html( "<p><i>" + data.username + " is typing a message..." + "</i></p>" );}); |
Имя файла: app.js
socket.on( 'typing' , (data) { socket.broadcast.emit( 'typing' , {username : socket.username});}); |