Jan 5 2015 at 17:11

Новый Socket.IO, обмен данными в реальном времени

Invite pending

В данной статье я расскажу, как в браузере организовать передачу данных в реальном времени в обе стороны. Для этого мы будем использовать 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

Tags:

Hubs: