Создание чата (веб-сокеты)

Сначала надо настроить сервер через модуль exress.

Затем установить модуль socket.io для работы с сокетами.

npm install socket.io

Код создания веб-сервера для чата.

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io').listen(http);

// установка папки и движка шаблона
app.set('views', 'views');
app.set('view engine', 'ejs');

// код выполняется, когда пользователь открывает страницу с чатом
io.on('connection', function(socket){
    console.log('User connected');

    // код выполняется, когда пользователь закрывает страницу с чатом
    socket.on('disconnect', function(){
        console.log('User disconnected');
    });

});

// страница с чатом (файл «views/chat.ejs»)
app.get('/chat', function(req, res) {
    res.render('chat');
});

// запуск веб-сервера (через переменную http)
http.listen(3000, function(){
    console.log('Server running');
});

В шаблоне добавить следующий код (файл «/socket.io/socket.io.js» на сервере появится автоматически).

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>

Надо создать форму, которая будет отправлять сообщения в чат.

<!-- views/chat.ejs -->

<!-- область, где будут появляться сообщения -->
<ul id="messages"></ul>

<!-- Форма отправки сообщения -->
<form id="chat-form">
    <input type="text" id="chat-message">
    <input type="submit" value="Отправить">
</form>

Код, который будет отправлять сокет на сервер.

<!-- views/chat.ejs -->

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var chatMessage = document.getElementById("chat-message");

// выполнение кода после нажатия на кнопку «Отправить»
document.getElementById("chat-form").onsubmit = function(e) {

    // отмена действия по умолчанию (отправка формы)
    e.preventDefault();

    // отправка сокета с именем «chat message»
    socket.emit("chat message", chatMessage.value);

}
</script>

Метод socket.emit() генерирует событие с указанным именем. В данном случае, генерируется событие отправки сообщения в чат. Отследить данное событие со стороны сервера можно через метод socket.on().

// app.js

io.on('connection', function(socket){
    console.log('user connected');

    // принимать сокет с именем «chat message»
    socket.on('chat message', function(msg){

        // отправить сообщение в чат всем пользователям
        io.emit('chat message', msg);

    });

});

После того, как на сервере был принят сокет, идёт отправка всем пользователям, что в чате появилось новое сообщение. Принять данное сообщение и добавить в чат можно через метод socket.on('socket-name').

// views/chat.ejs

socket.on('chat message', function(msg){

    // создание тега <li> с новым сообщением
    var newMessage = document.createElement("li");
    newMessage.innerHTML = msg;

    // добавление сообщения в элемент с id «messages»
    document.getElementById("messages").appendChild(newMessage);

});

Обновлено: 01 ноября 2020

Создание чата (веб-сокеты)

Шаг 2. Отправка сокетов