Недавно, из -за потребностей проекта, я изучил реализацию WebSocket Nodejs, socket.io, которая является структурой, широко используемой Nodejs фоновым приложением WebSocket.
Подготовка
1. Установите Socket.io и используйте команду NPM Install Socket.io
2. Для систем Windows требуется компиляция VC, поскольку при установке Socket.io будет составлен код VC.
Основные принципы игры
1. Сервер слушает соединение клиента
2. Когда клиентское соединение успешно, страница привязки перемещает событие мыши, а текущая координата отправляется на сервер.
3. Сервер сохраняет глобальный объект координат и использует уникальный номер клиента в качестве значения ключа.
4. Когда появится новое соединение, транслируйте координаты другим клиентам
5. Когда клиент отключен, сервер удаляет информацию о координате и передает ее другим клиентам.
Начните реализовывать код сервера
Когда Scoket.io устанавливает мониторинг сервера, ему необходимо полагаться на HTTP -соединение для обработки протокола обновления, поэтому ему также нужен модуль HTTP, код выглядит следующим образом:
Кода -копия выглядит следующим образом:
var http = require ('http'),
io = require ('socket.io');
var app = http.createserver (). Слушай (9091);
var ws = io.listen (app);
Затем определите глобальный координатный объект
Кода -копия выглядит следующим образом:
var posts = {};
Начните слушать соединение клиента и добавить новую функцию вещания (на самом деле, вы можете использовать метод вещания io.sockets.broadcast.emit, который поставляется с socket.io), а код основного
Кода -копия выглядит следующим образом:
ws.on ('connection', function (client) {
// трансляционная функция
var Broadcast = function (msg, cl) {
для (var k in ws.sockets.sockets) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && ws.sockets.sockets [k] .id! = cl.id) {
ws.sockets.sockets [k] .emit ('position.change', msg);
}
}
}
};
console.log ('/033 [92m имеет новое соединение:/033 [39m', posts);
// после успешного подключения клиента, координата других клиентов будет отправлена
client.emit ('pace.change', posts);
// Получение клиента отправляет сообщение
client.on ('position.change', function (msg) {
// В настоящее время сообщение клиента является только сообщением координат
положения [client.id] = msg;
// транслировать сообщения всем другим клиентам
транслировать({
Тип: 'позиция',
Пост: MSG,
ID: client.id
}, клиент);
});
// Получение сообщения о закрытии подключения клиента
client.on ('close', function () {
console.log ('close!');
// удалить клиента и уведомить других клиентов
Удалить положения [client.id];
// транслировать сообщения всем другим клиентам
транслировать({
Тип: «Отключить»,
ID: client.id
}, клиент);
});
// отключить
client.on ('dinnonnect', function () {
console.log ('Deanconct!');
// удалить клиента и уведомить других клиентов
Удалить положения [client.id];
// транслировать сообщения всем другим клиентам
транслировать({
Тип: «Отключить»,
ID: client.id
}, клиент);
})
// Определить обработку исключений клиента
client.on ('error', function (err) {
console.log ('error->', err);
})
});
Ключевой точкой анализа вышеуказанного кода является
1. Новый клиент успешно подключен, а координатная информация других клиентов отправляется.
2. Когда клиент обновляет информацию о координате, уведомите других клиентов.
3. Клиент отключает и уведомляет других клиентов
4. Типы сообщений вещания делятся на модификацию координат и удаление координат
Написать клиенту HTML -страницу
Поскольку Socket.io является пользовательской структурой, клиент должен обратиться к Socket.io.js. Это JS можно найти из модуля Socket.io. Путь обычно является node_modules/socket.io/node_modules/socket.io-client/dist. Есть две версии слияния и сжатия. Вы можете использовать версию Merge во время разработки.
Полный код заключается в следующем:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<title> socket.io Пример одновременного онлайн -взаимодействия нескольких людей </title>
<meta charset = "utf-8">
</head>
<тело>
<script type = "text/javascript" src = "socket.io.js"> </script>
<script type = "text/javascript">
var ws = io.connect ('http: // localhost: 9091/');
var isfirst;
ws.on ('connect', function () {
console.log (ws);
// Начало связывания события MouseMove
document.onmousemove = function (ev) {
if (ws.socket.transport.isopen) {
ws.emit ('position.change', {x: ev.clientx, y: ev.clienty});
}
}
})
ws.on ('position.change', function (data) {
// начинать онлайн одновременно
if (! isfirst) {
isfirst = true;
// первое сообщение - получить координаты всех других клиентов
для (var i в data) {
Переместить (i, data [i]);
}
}еще{
// В противном случае это либо сообщение, которое отключено или обновляется сообщение.
if ('position' == data.type) {
MOVE (data.id, data.post);
}еще{
удалить (data.id);
}
}
})
ws.on ('error', function () {
console.log ('error:', ws);
ws.disconnect ();
})
Функция перемещения (id, pos) {
var ele = document.queryselector ('#cursor_' + id);
if (! ele) {
// Если его не существует, это будет создано
ele = document.createElement ('img');
ele.id = 'cursor_' + id;
ele.src = 'img/cursor.png';
ele.style.position = 'Absolute';
document.body.appendchild (ele);
}
ele.style.left = pos.x + 'px';
ele.style.top = pos.y + 'px';
}
функция удалить (id) {
var ele = document.queryselector ('#cursor_' + id);
ele.parentnode.removechild (ele);
}
</script>
</body>
</html>
IMG/CURSOR.PNG на странице можно найти здесь, CURSOR.PNG, и здесь есть много других значков мыши. Принцип передней части относительно прост. Простой анализ выглядит следующим образом
1. Когда соединение будет успешным, свяжите событие MouseMove на странице и отправьте новое сообщение координат.
2. Получили сообщение в соответствии с типом сообщения, необходимо ли изменить другие клиентские сообщения или удалить другие сообщения клиента?
3. Определите добавление других значков курсора клиента и удаление значков курсора
4. Обработка сообщений исключений клиента и добавить отключение, чтобы сервер мог удалить информацию о координате
Запуск примера
1. Сохраните код сервера как io_multigame.js
2. Сохраните клиентский код как io_multigame.html
3. Запустите узел кода сервера io_multigame.js
4. Откройте несколько страниц io_multigame.html, чтобы увидеть эффект
Суммировать
Письмо довольно случайно и ссылаются на удивительные узлы. Это хорошая книга. Друзья, которые хотят знать Nodejs, могут прочитать эту книгу.