Как правильно использовать Socket.IO с Express Framework в Node.js

Сокеты превращают сеть во что-то более простое в управлении и работе. Socket.IO обеспечивает двустороннюю связь на основе событий в режиме реального времени, работает на любой платформе, в любом браузере или устройстве, уделяя одинаковое внимание надежности и скорости.

Socket.IO обрабатывает для вас постепенную деградацию к многочисленным техническим альтернативам для обеспечения двусторонней связи в ближнем времени (веб-сокеты, длинный опрос ajax, вспышка и т. Д.). Кроме того, он обрабатывает несоответствия браузера и различные уровни поддержки для вас и намного проще работать, чем ванильные веб-сокеты, по крайней мере, на данный момент.

В этой статье вы за пару минут узнаете, как легко запустить Socket.IO и Express Framework, минималистский веб-фреймворк.

Требования

Установите Express в своем проекте, выполнив следующую команду в консоли Node.js:

npm install express --save

Аналогично, установите Socket.IO в своем проекте, выполнив следующую команду в консоли Node.js:

npm install socket.io --save

И вы готовы начать!

Реализация

Для корректной работы с Express и Socket.IO нам потребуется модуль http для node.js, так как он будет отвечать за сервер. Переменная server является возвращенным объектом createServer метод (который получает экспресс-приложение в качестве первого параметра) и, в свою очередь, переменная сервера будет использоваться в качестве первого параметра в listen метод socket.io модуль.

Создать файл (названный server.js) куда хотите и добавьте следующий код:

Замечания: чтобы запустить сервер самостоятельно, метод listen должен выполняться из переменной server, а не из самого приложения. Вы должны понимать это, чтобы предотвратить известные ошибки, такие как «SocketIO: err_connection_refused».

var http = require('http');
var express = require('express');
var app = express();
var server = http.createServer(app);
// Pass a http.Server instance to the listen method
var io = require('socket.io').listen(server);
// The server should start listening
server.listen(80);
// Register the index route of your app that returns the HTML file
app.get('/', function (req, res) {
console.log("Homepage");
res.sendFile(__dirname + '/index.html');
});
// Expose the node_modules folder as static resources (to access socket.io.js in the browser)
app.use('/static', express.static('node_modules'));
// Handle connection
io.on('connection', function (socket) {
console.log("Connected succesfully to the socket ...");
var news = [
{ title: 'The cure of the Sadness is to play Videogames',date:'04.10.2016'},
{ title: 'Batman saves Racoon City, the Joker is infected once again',date:'05.10.2016'},
{ title: "Deadpool doesn't want to do a third part of the franchise",date:'05.10.2016'},
{ title: 'Quicksilver demand Warner Bros. due to plagiarism with Speedy Gonzales',date:'04.10.2016'},
];
// Send news on the socket
socket.emit('news', news);
socket.on('my other event', function (data) {
console.log(data);
});
});

Наш серверный код должен работать с первого раза. Как вы можете видеть, когда есть входящее соединение от браузера к сокету, мы собираемся напечатать сообщение «Успешно подключен к сокету» в консоли Node, и мы собираемся отправить некоторую информацию в активный сокет в браузере. (в этом случае мы собираемся отправить простой объект с некоторыми «новостями» для отображения в файле index.html).

Замечания: app.use('/static') линия, выставит node_modules папка на сервере, это для доступа к файлу socket.io.js в index.html. Вы можете удалить эту строку и скопировать файл socket.io.js из папки socket.io и скопировать ее непосредственно в ту же директорию, где находится index.html, на тот случай, если вы не хотите открывать эту папку.

Таким же образом, мы только что добавили индекс маршрута (/) с файлом в качестве возвращаемого значения (index.html) который будет содержать следующий код:


Socket.io
Express and socket.io
var socket = io('http://localhost:80');
socket.on('news', function (data) {
var div = document.getElementById("news-list");
console.log("Rendering news : ",data);
for(var i = 0;i < data.length;i++){
var newsItem = data[i];
div.innerHTML += "

" + newsItem.title + ' '+ newsItem.date + "

"; } socket.emit('my other event', { my: 'data' }); });

Объявление переменной сокета откроет соединение между браузером и сервером (через сокет), что приведет к выполнению метода on («connection») в нашем server.js файл и отправит информацию, которая будет манипулировать в представлении.

Теперь вам просто нужно проверить это! выполните файл server.js, выполнив следующую команду в консоли вашего узла:

node server.js

Перейдите в своем любимом браузере, чтобы HTTP: // локальный: 80 и сокетное соединение должно работать правильно (и новости будут отображаться, как и планировалось в нашей логике):

Socket.IO и сокет Express Framework

Повеселись !

Ссылка на основную публикацию
Adblock
detector