Быстрый старт Socket.io

Быстрый старт Socket.io
Метки: / /

В этой статья я разберу не большую JavaScript библиотеку для работы с WebSocket, которая называется Socket.io, покажу не большой пример и как подключить.

Также если вы не знаете что такое WebSocket, то посмотрите статью
«Что такое WebSocket и как он работает».

Как подключить Socket.io:

Перед тем как начать работать, нужно рассмотреть подключение Socket.io, это можно сделать двумя способами, через CDN или NPM.

CDN:

NPM:

Тут стоит сказать, что через NPM, можно скачать Socket.io только для серверной части сайта.

На этом установка закончилась.

Работа с Socket.io:

Теперь перейдём к работе с этой библиотекой, скажу что я не буду делать для примера слишком большую программу.

Для начала сделаем серверную часть на Node.js.

Давайте разберём этот не большой код, в начале мы подключаем библиотеку для сервера Node.js, потом уже API Socket.io.

Дальше пишем функцию, которая будет срабатывать, когда клиент подключен к серверу, внутри выводим в консоль «connection», потом отправляем клиенту «Привет», тут стоит заметить, что используем функция io.emit(), которая отправляет сообщения и в качестве первого параметра она использует грубо говоря заголовок сообщения, второй это само сообщение.

Примечание:

Первый параметр нужно запомнить, так как он будет использоваться для принятия сообщения на стороне клиента.

Потом отслеживаем десконект и при случаи этого выводим в консоль «disconnected», последние назначаем порт для подключения к серверу.

Теперь перейдём клинской части сайта, тут тоже нечего сложного нет, но в начале, мы создадим HTML документ.

Самое интересное что есть в этом коде, это блок с текстом, куда будем его выводить, и скрипт с библиотекой Socket.io.

Вот клиентский код.

В начале мы подключаем блок и библиотеку Socket.io, дальше отслеживаем подключение к серверу, внутри пишем надпись «Подключение прошло успешно», и смотрит сообщение от сервера со заголовком «hello», выводим это на экран.

Вот что мне вывел сервер.

как подключить socket.io на сервере

Вот что вывел клиент.

как подключить socket.io на клиенте

Как видите всё очень просто, нужно только запомнить две функции.

  • socket.on(header, function) — Для отслеживания сообщений, как от клиента, так и от сервера:
    • header — Заголовок сообщения;
    • function — Функция для назначения что делать если есть сообщение;
  • socket.emit(header, data) — Отправка сообщений ко всем клиентам или серверу:
    • header — Заголовок сообщения;
    • data — Само сообщение;

За счёт того что так мало команд, так легко работать с библиотекой.

Вывод:

В этой статье вы прочитали о JavaScript библиотеки Socket.io, как её подключить и работать с ней, если вас заинтересовала она, то зайдите посмотрите документацию.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: