В этой статья я разберу не большую JavaScript библиотеку для работы с WebSocket, которая называется Socket.io, покажу не большой пример и как подключить.
Также если вы не знаете что такое WebSocket, то посмотрите статью
«Что такое WebSocket и как он работает».
Как подключить Socket.io:
Перед тем как начать работать, нужно рассмотреть подключение Socket.io, это можно сделать двумя способами, через CDN или NPM.
CDN:
1 | <script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script> |
NPM:
Тут стоит сказать, что через NPM, можно скачать Socket.io только для серверной части сайта.
1 | npm install socket.io |
На этом установка закончилась.
Работа с Socket.io:
Теперь перейдём к работе с этой библиотекой, скажу что я не буду делать для примера слишком большую программу.
Для начала сделаем серверную часть на Node.js.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Создание сервера const server = require('http').createServer(); // Берём API socket.io const io = require('socket.io')(server); // Подключаем клиенты io.on('connection', () => { // Выводим в консоль 'connection' console.log('connection') // Отправляем всем кто подключился сообщение привет io.emit('hello', 'Привет') // Что делать при случае дисконнекта io.on('disconnect', () => { // Выводи 'disconnected' console.log('disconnected'); }); }); // Назначаем порт для сервера server.listen(3000); |
Давайте разберём этот не большой код, в начале мы подключаем библиотеку для сервера Node.js, потом уже API Socket.io.
Дальше пишем функцию, которая будет срабатывать, когда клиент подключен к серверу, внутри выводим в консоль «connection», потом отправляем клиенту «Привет», тут стоит заметить, что используем функция io.emit(), которая отправляет сообщения и в качестве первого параметра она использует грубо говоря заголовок сообщения, второй это само сообщение.
Примечание:
Первый параметр нужно запомнить, так как он будет использоваться для принятия сообщения на стороне клиента.
Потом отслеживаем десконект и при случаи этого выводим в консоль «disconnected», последние назначаем порт для подключения к серверу.
Теперь перейдём клинской части сайта, тут тоже нечего сложного нет, но в начале, мы создадим HTML документ.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>WebSocket</title> </head> <body> <div id="text"></div> <script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script> </body> </html> |
Самое интересное что есть в этом коде, это блок с текстом, куда будем его выводить, и скрипт с библиотекой Socket.io.
Вот клиентский код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Подключаем блок для вывода текста let text = document.getElementById("text") // Подключаемся к серверу let socket = io('http://localhost:3000'); // Отслеживаем подключение socket.on('connect', function () { // Выводим сообщение подключение text.innerHTML = "Подключение прошло успешно<br>" // Отслеживание сообщения от сервера со заголовком 'hello' socket.on('hello', function (data) { // Выводим сообщение от сервера text.innerHTML += "Сервер: " + data + "<br>" }); }); |
В начале мы подключаем блок и библиотеку Socket.io, дальше отслеживаем подключение к серверу, внутри пишем надпись «Подключение прошло успешно», и смотрит сообщение от сервера со заголовком «hello», выводим это на экран.
Вот что мне вывел сервер.
Вот что вывел клиент.
Как видите всё очень просто, нужно только запомнить две функции.
- socket.on(header, function) — Для отслеживания сообщений, как от клиента, так и от сервера:
- header — Заголовок сообщения;
- function — Функция для назначения что делать если есть сообщение;
- socket.emit(header, data) — Отправка сообщений ко всем клиентам или серверу:
- header — Заголовок сообщения;
- data — Само сообщение;
За счёт того что так мало команд, так легко работать с библиотекой.
Вывод:
В этой статье вы прочитали о JavaScript библиотеки Socket.io, как её подключить и работать с ней, если вас заинтересовала она, то зайдите посмотрите документацию.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 4,50
Загрузка...