Установка чата с использованием Node.js и Socket.io. Часть 3.

Интеграция Socket.IO

Socket.IO состоит из двух частей:

Сервер, который интегрируется с Node.JS HTTP Server: socket.io
Клиентская библиотека, которая загружается со стороны браузера: socket.io-client

Устанавливаем модуль socket.io

npm install --save socket.io

А также, добавит зависимость в package.json. Теперь давайте отредактируем index.js, чтобы добавить его:

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

app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});

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

http.listen(3000, function(){
console.log('listening on *:3000');
});

Стоит обратить внимание, что происходит инициализиция socket.io путем передачи http (HTTP server). Затем я "слушаем" connection путем вывода его на консоль.

Теперь в index.html добавим следующий фрагмент скрипта перед тегом </ body>:

рисунок.png

Это все, что требуется для загрузки socket.io-client, который предоставляет глобальный io, а затем подключается.

Обратите внимание, что не указывается ни одного URL-адреса при вызове io (), поскольку по умолчанию он пытается подключиться к хосту, обслуживающему страницу.

Если сейчас перезагрузитm сервер и web-сайт, то можно увидить в консоле (командной строке) печать a user connecled "пользователь подключен". Попробуйте открыть несколько вкладок, и вы увидите несколько сообщений:

рис5.png

Каждый socket также запускает специальное событие разъединения:

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

Затем, если вы обновите вкладку несколько раз, вы можете увидеть ее в действии:

рис6.png

Выпуски событий

Основная идея Socket.IO заключается в том, что вы можете отправлять и получать любые нужные вам события с любыми данными, которые вы хотите. Любые объекты, которые могут быть закодированы как JSON, будут выполняться, а также поддерживаются двоичные данные.

Давайте сделаем так, чтобы, когда пользователь вводит сообщение, сервер получает его как chat messageчата. Секция script в index.html теперь должна выглядеть следующим образом:

екнг.png

И в index.js мы печатаем chat message мероприятие:

Результат должен выглядеть следующим образом:

Следующая статья заключительная. В ней будет рассмотрен вопрос вещания чата для всех
пользователей.

Часть первая

Часть вторая