Преамбюл

Тази статия ще разгледа настройката на двупосочни канали между сървър и клиент(и) със socket.io и въведение в някои от неговите основни функции.

Ще използваме термина „WebSocket“ в тази статия, за да опишем технологията, която socket.io използва под капака. Все пак, имайте предвид, че това не винаги може да е така при определени обстоятелства. Повече за това в долната част на страницата.

В края на статията ще има и малка дискусия относно това защо socket.io е чудесен избор (вместо да разчитате на основния API на WebSockets), но можете да пропуснете това, ако сте тук само за съвети за настройка и нека приемете го, вероятно сте... 😉

Инсталация

Стъпка 1

Имате работещ сървър. Ние използваме Express тук, но можете да използвате всяка настройка, която предпочитате.

const http = require(‘http’);
const express = require(‘express’);
const app = express();
const server = http.createServer(app);

Стъпка 2

Инсталирайте socket.io от node.js. Заменете npm с преждаспоред изискванията.

npm install socket.io

Стъпка 3

Изисквайте socket.io на вашия js файл от страна на сървъра. Не е нужно да се притеснявате да правите това от страна на клиента/публични js файлове.

const socketio = require(‘socket.io’);

Стъпка 4

Създайте глобална ioпроменлива с вашия сървър, предаден като аргумент.

const io = socketio(server);

Стъпка 5

Във вашия клиентски js файл създайте променлива на сокет, като използвате глобалната io променлива.

const socket = io();

И това е наистина! Готови сме за рокендрол. След това нека да разгледаме настройката на някои основни функции, за да можем да проверим дали работят.

Сокет към мен!

Тук има две основни концепции, които трябва да разберем, за да се възползваме от нашия лъскав нов сокет.

на събития

Събитието включеносе използва за прослушване за излъчванесъбития и след това да се направи нещо в отговор.

излъчване на събития

Събитието излъчване изпраща сигнал (и по избор някои данни) към конкретен клиент или към множество/всички клиенти, свързани към сокета.

Стъпка 1

Нека да настроим слушател от страната на нашия сървър, за да знаем кога клиент се е свързал с нас.

  • io.onсе използва тук за проверка на нашата ioпроменлива за всякакви връзки.
  • връзкае ключова дума, запазена за ново събитие за свързване.
  • socketе името, което сме дали за отнасяне към свързания клиент. Можете да използвате каквато дума искате тук.
io.on(‘connection’, socket => {}

Стъпка 2

Нека добавим код, който да се изпълнява, когато първият ни нов приятел се свърже с нас.

  • съобщениее името, което сме дали на излъченото от нас събитие. Можете да използвате всичко тук. Ще трябва да уловим това съобщение от страна на клиента, като запомним името, което сме избрали тук.
  • Вторият параметър не е задължителен. Това са данните, които ще бъдат изпратени с нашето излъчване. Тук сме избрали да изпратим низ. 7
  • socket.emit. Тук е важно да се отбележи, че нашето излъчванее самоизпращано до един клиент, който току-що се е свързал.
io.on(‘connection’, socket => {
  socket.emit(‘message’, “Hello there. “)
}

Стъпка 3

Добре, да отидем и да хванем нашата страна на излъчваклиента.

socket.on(‘message’, data => {
  console.log(data)
});

Страхотен! Това вече ще се появи в нашия браузър console.log, когато се свържем със сървъра.

Стъпка 4

След това ще опитаме да излъчимнещо на сървъра, за да ги уведомим, че сме получили съобщението.

socket.on(‘message’, data => {
  console.log(data);
  socket.emit(‘reply’, “General Kenobi”);
});

Стъпка 5

Обратно от страната на клиента, нека хванем това внашия io.onкод.

io.on('connection', socket => {
  socket.emit('message', "Hello there. ")
  socket.on('reply', data => {
    console.log(data)
  }
}

Стъпка 6

Последна стъпка. Нека изпробваме излъчване за всички. Да кажем, че след като получим съобщението си от клиента, искаме да уведомим всеки друг свързан клиент, че нашият нов приятел се е присъединил.

Обратно в кода на нашия сървър позволяваме да добавим излъчване към нашата функция, улавящо отговора.

  • io.emitтова ще изпрати до всички свързани клиенти.
  • има много други събития, които можете да използвате. Разгледайте тази измамна таблица за повече https://socket.io/docs/v3/emit-cheatsheet/index.html
  • Не забравяйте да уловите това излъчване от страна на клиента, като използвате socket.on(‘reply’, ()=›{})0!
io.on('connection', socket => {
  socket.emit('message', "Hello there. ")
  socket.on('reply', data => {
    console.log(data)
    io.emit('everyone', "A new friend connected!"
  }
}

И това е! Имаме двупосочна комуникация в реално време между множество клиенти и нашия сървър. Отидете да го проверите и направете страхотни игри за много играчи или приложения за съобщения.

Дискусия

Ако все още сте тук, поздравления!

Тук ще разгледаме някои от предимствата на използването на socket.io спрямо стандартния WebSockets API.

  • WebSockets използва TCP и е строго peer to peer. Нямаме възможност да излъчваме към всички свързани клиенти едновременно и нека си признаем, това почти сигурно ще бъде ключова характеристика на повечето WebSocket творения.
  • Socket.io също ще се опита да се свърже отново вместо вас, ако връзката неочаквано прекъсне, WebSockets не включва тази функция.
  • Socket.io използва основно технологията WebSocket, тъй като е бърза и лека. Въпреки това, ако има проблем, socket.io ще се върне към друга технология (а именно анкетиране), в опит да ви задържи в бизнеса в краен случай.
  • И накрая, socket.io е лесен за работа. Не е трудно да се настрои и има ясна, лесна за следване документация.
  • Какво не харесвате!

Контакт