Node.js, Socket.io и Express: Создание чата с нуля. Часть 1

Node.js, Socket.io и Express: Создание чата с нуля. Часть 1
5 (100%) 4 votes

В этом уроке мы подробно рассмотрим функционал библиотеки 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. После этого, в браузере мы увидим сообщение с сервера.

Node.js, Socket.io, Express

У нас уже есть Сокет-Сервер, который создан с помощью Socket.io, Node.js и Express. В второй части этой статьи мы на базе этого сервера создадим чат. Весь список уроков Node.js представлен на этом странице.


Об авторе

Занимаюсь программированием уже более 7 лет. Часто использую JavaScript (Node.js) и Python. Хобби - Квантовая механика и нейронные сети.

Комментарии