Первые шаги с помощью WebSocket и Node.js (и Socket.io)

Демонстрация отправки уведомлений на веб-страницу через WebSocket с Node.js в источнике, на сервере или локально.

Мы увидим, что с помощью WebSocket легко создать HTML-интерфейс 5 для локального приложения. Возможны и другие приложения, например, дистанционное управление роботом.

мы и выдаем

API socket.io содержит два метода обмена данными, которые работают на стороне клиента или на стороне сервера, emit и on. Для запуска соединения используются другие методы.

передал

Отправка данных. Параметр имеет такой код, как, например, «уведомление», а другая сторона реагирует на эту команду методом, который имеет такой же код.

Отвечает на отправку данных другой стороной и вызывает функцию, предоставленную в качестве параметра, для обработки этих данных .

подключение

Запускает соединение с сервером по запросу клиента. Она имеет имя сервера, по умолчанию его не ставят.

список

Создает прослушиватель (прослушиватель) - функцию, перехватывающую вмешательства клиента.

Сценарий интерфейса сначала создает объект сервера, затем объект socket.io, затем прослушиватель. Он отправляет HTML-страницу клиенту .

Веб-страница после отображения на стороне клиента создает объект сокета и устанавливает соединение:

var socket = io.connect();

socket.on('notification', function(x) { notification(x); });

Функция уведомления - это хэндлер, который ждет ответа от сервера и обрабатывает данные, которые отправляет сервер. В нашем примере обработка заключается в том, чтобы поместить полученные данные в слой, id которого является «хранением».

Сервер перехватывает запрос клиента с функцией on:

listener.sockets.on('connection', function (socket) { start(socket);} ); 

Он отвечает командой:

socket.emit('notification', 'Server online via socket!'); 

Все это происходит при загрузке страницы. Теперь посмотрим, как добиться реального взаимодействия пользователя и сервера.

Взаимодействие с сервером

Для реального взаимодействия необходимо, чтобы страница отправляла запрос на сервер по запросу пользователя и отображала данные, переданные сервером в ответ.

Чтобы продемонстрировать это, добавьте кнопку на страницу. Когда пользователь нажимает эту кнопку, выполняется функция JavaScript callserver.
Затем HTML-страница запускает обмен со сценарием на стороне сервера с помощью команды emit.

socket.emit('called', 'Nothing'); 

Сервер перехватывает запрос и в ответ на команду «called» отправляет новое сообщение. Это сообщение представляет собой набор данных в формате JSON, который мы представили здесь со строкой ':

socket.emit('notification', 'Yes still here! Want some data?');

На клиентской стороне всегда один и тот же хэндлер принимает данные и отображает содержимое.

socket.on('notification', function(x) { notification(x); });	

На практике содержание будет представлять собой набор ключей-значений, при этом ключи соответствуют, например, текстовым полям на HTML-странице, а значение - содержимому, которое должно отображаться на ней.

Вот полный исходный код обоих файлов...

Сценарий со стороны сервера, socket-mini.js

var uri="/socket-mini.html";
var fs = require('fs'),
    http = require('http'),
    socket = require("socket.io");

var page = fs.readFileSync(__dirname + uri);

function handler(request, response)
{
  response.write(page);
  response.end();
}
var app = http.createServer(function(r, s){ handler(r,s); });
app.listen(1000);
var listener = socket.listen(app, { log: false });

function start(socket)
{
  socket.emit('notification', 'Server online via socket!');
  socket.on('called', function(){
    console.log("Request received.");
    listener.sockets.emit('notification', 'Yes still here! Want some data?');
});
}
listener.sockets.on('connection', function (socket) { start(socket);} );

Для запуска сервера введите командную строку:

node socket-mini.js

Сервер отвечает только на два типа запросов: «connection» и «called», первый предварительно определен, второй создан нашей демонстрацией.
Можно создавать любое количество запросов. Если вы хотите избежать определения функции для каждой, вы можете поместить в данные, отправленные с помощью «called», массив типа ключ-значение, каждый ключ соответствует команде и каждое значение, предоставляющее параметры для нее.

Сценарий со стороны клиента, socket-mini.html

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title></title>
</head>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect();

function notification(content)
{
  var x= document.getElementById("storage");
  x.innerHTML = content;
  console.log(content);
}

socket.on('notification', function(x) { notification(x); });

function callserver()
{
  socket.emit('called', 'Nothing');
}
</script>

<body>
<h1>Notification from server by socket.io</h1>
<fieldset><legend>Messages received</legend>
<div id="storage"></div>
</fieldset>

<form name="form1" method="post" action="">
<input type="button"  value="Call server" onClick="callserver()">
</form>
</body>
</html>

Эта страница отправляется сервером и отображается браузером при вводе URL-адреса браузера:

localhost:1000

Эта демонстрация ограничивается одной HTML-страницей, заданной в качестве параметра серверу и назначенной переменной uri (что достаточно для создания приложения с HTML-интерфейсом). Основываясь на предыдущих учебниках, в том числе «Как создать сервер страниц с Node.js», можно сделать его более общим и использовать разные HTML-страницы с одним и тем же серверным скриптом. Полную информацию об этом предоставляет Advanced Explorer в разделе «Сценарии».

Только нам интересны для этой статьи файлы socket-mini.html и socket-mini.js.