В данной статье я расскажу, как в браузере организовать передачу данных в реальном времени в обе стороны. Для этого мы будем использовать Node.js и библиотеку Socket.IO.
Socket.IO — JavaScript библиотека для веб-приложений и обмена данными в реальном времени. Состоит из двух частей: клиентской, которая запускается в браузере и серверной для node.js. Оба компонента имеют похожее API.
На Хабре уже была опубликована статья «Создаем чат на Node.js и Socket.IO», но с того времени библиотека изменила API и пример из публикации не работает на свежей версии (на момент написания статьи версия Socket.IO 1.2.1).
Сейчас, чтобы быть кратким, просто организуем приём и отправку информации.
Для чего это вообще нужно?
- Быстрый обмен данными для онлайн игр, чатов и пр.;
- Веб-приложения с интенсивным обменом данными, требовательные к скорости обмена и каналу;
- Push уведомления;
- Удалённый доступ как тут;
Я же просто написал простой мультиплеерный 3D шутер.
Начнём с серверной части
Установим Node.js, как это сделать можно прочитать тут.
Модуль легко установить, используя менеджер npm:
npm install socket.ioПосле создадим файл socket.js и пишем в него код:
var io = require('socket.io');
var http = require('http');
var app = http .createServer();
var io = io.listen(app);
app.listen(80);
io.sockets.on('connection', function (socket) {
socket.on('eventServer', function (data) {
console.log(data);
socket.emit('eventClient', { data: 'Hello Client' });
});
socket.on('disconnect', function () {
console.log('user disconnected');
});
});
Теперь клиент
Создадим socket.html и в него пишем:
<html>
<head>
<title>Test socket.io</title>
<script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('eventClient', function (data) {
console.log(data);
});
socket.emit('eventServer', { data: 'Hello Server' });
</script>
</head>
<body>
</body>
</html>
Запускаем socket.js в Node.js и socket.html в браузере.
При загрузке страницы на локальный сервер будет отправленно сообщение {data: 'hello Server'}. На что сервер ответит {data: «Hello Client»}.
Оба сообщения можно увидеть в окне node js и в консоли JavaScript браузера соответственно.
Клиентская библиотека сама определяет, какой тип связи использовать для потоковой передачи данных и выбирает лучший из:
- WebSocket
- Adobe Flash Socket
- AJAX long polling
- AJAX multipart streaming
- Forever Iframe
- JSONP Polling
В данном примере сообщение отправляется только тому клиенту, который отправил запрос, что бы отправить сообщение всем ипользуйте:
// отправить текущему сокету сформировавшему запрос (туда откуда пришла)
socket.emit('eventClient', "this is a test");
// отправить всем пользователям, включая отправителя
io.sockets.emit('eventClient', "this is a test");
// отправить всем, кроме отправителя
socket.broadcast.emit('eventClient', "this is a test");
// отправить всем клиентам в комнате (канале) 'game', кроме отправителя
socket.broadcast.to('game').emit('eventClient', 'nice game');
// отправить всем клиентам в комнате (канале) 'game', включая отправителя
io.sockets.in('game').emit('eventClient', 'cool game');
// отправить конкретному сокету, по socketid
io.sockets.socket(socketid).emit('eventClient', 'for your eyes only');
Источник: github.com/Automattic/socket.io/wiki
