В этом уроке мы подробно рассмотрим функционал библиотеки Socket.io и напишем чат с помощью сокетах, Node.js и Express Framework.
Последние время WebSockets стали довольно популярный, появились очень многие приложение, игры и сайты, которые используют Веб-Сокеты. Но несмотря на это, есть проблемы с браузерами — все новые браузеры поддерживают протокол WS, но как быть с старыми браузерами? Если бы мы писали чистый код (не используя библиотеку), то для решение этой проблемы нам нужно было писать некоторые условия и костыли. Но если мы будем использовать библиотеку Socket.io, то данная проблема для нас не актуален.
Знакомство с Socket.io — Что это такое
Высшее уже сказал, что с библиотекой Socket.io у нас не будет проблем с браузерами — данная библиотека осуществляет взаимодействие тем способом, который подходит для его участников (клиент, сервер). Ниже представлен список доступных методов:
- WebSocket
- Adobe Flash Socket
- Server-Sent Events
- XHR long polling
- XHR multipart streaming
- Forever Iframe
- JSONP Polling
- ActiveX HTMLFile
Для современных браузеров, которые поддерживают протокол WebSocket, библиотека Socket.io будет использовать аналогичный метод взаимодействия. При отсутствие поддержки он автоматический выберет подходящий и лучший метод взаимодействие. Кроме этого библиотека Socket.io добавляет в стандартный функционал WebSocket новые функции, которые рассмотрены ниже.
Создание сокет-сервера на Socket.io
Давайте начнем создать простой сокет-сервер на библиотеке Socket.io, Node.js и Express framework. Для этого нам нужно создать папку для проекта, открыть терминал / командную строку, перейти в папку. После этого в папке создаем файл package.json с таким содержанием:
{
"name": "socket",
"version": "0.0.1",
"description": "Мой первый проект на Socket.io",
"dependencies": {}
}
После этого нужно установить Express фреймворк и библиотеку Socket.io.
npm install --save express npm install --save socket.io
После установки необходимых библиотек нужно создать файл server.js, который будет сервером. Наш сервер будет состоять из нескольких строк кода.
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
socket.emit("hello", "Привет из Сокет-сервера");
});
http.listen(3000, () => {
console.log('Сервер слушает порт 3000');
});
В первых трех строках кода мы подключаем необходимые модули — Express Framework, HTTP, Socket.io. Далее устанавливаем обработчик — при запросе на главную страницу мы отправим клиенту содержимое файла index.html. После этого устанавливаем новый обработчик (9 строка кода) — если клиент подключиться к Веб-Сокет серверу, то будет вызван функция обратного вызова и в переменную socket будут данные клиента. Десятом строке мы сообщаем клиенту, что должна выполнена события с названием hello, который находится на стороне клиента и отправляем сообщения, который клиент получить в виде параметра функцию обратного вызова.
Наш сервер готов, давайте создадим клиент. Создаем в папке файл index.html с таким содержанием:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Socket.io</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<script>
var socket = io();
socket.on("hello", function(serverData) {
alert(serverData);
});
</script>
</body>
</html>
Здесь мы подключаем библиотеку socket.io — <script src="/socket.io/socket.io.js"></script> почему у нас нет файла socket.io.js а он подключается — более подробно об этом поговорим потом. После подключение библиотеки, на стороне клиента нам будет доступна функция io(). После вызова, функции в переменную socket получить объект, который имеет несколько методов и объектов. Один из методов — это on(). С помощью этого метода мы устанавливаем событие. Первым параметром он принимает имя а вторым callback функцию. Из сервера мы можем вызвать событию с помощью метода emit().
Более подробно можно прочитать здесь — События в Node.js.
Наш Сокет-Сервер и клиент готов, можно запустить и тестировать. Вводим в терминале следующую команду:
npm start
Открываем в браузере этот адрес: http://localhost:3000. После этого, в браузере мы увидим сообщение с сервера.
У нас уже есть Сокет-Сервер, который создан с помощью Socket.io, Node.js и Express. В второй части этой статьи мы на базе этого сервера создадим чат. Весь список уроков Node.js представлен на этом странице.
Комментарии