Phenquestions
Протоколът WebSocket позволява двупосочна комуникация между клиент и сървър. Този процес е подобен на начина, по който се осъществяват обажданията на телефона ви: първо, вие установявате връзка и след това можете да започнете да общувате помежду си. Протоколът WebSocket се използва почти навсякъде - от мултиплейър игри за браузър до приложения за чат.
Тази статия ви показва как да създадете протокол WebSocket и да го използвате за комуникация с множество потребители.
Предпоставки
Преди да преминете към процеса на създаване и използване на протокол WebSocket, първо трябва да инсталирате няколко неща, които са необходими за този процес. Първото нещо, което трябва да инсталирате, е Node.js, сървърна платформа, която преобразува езика за програмиране JavaScript в машинен код, който ви позволява да стартирате JavaScript директно на вашия компютър. За да инсталирате Node.js, потребителите на Windows могат просто да отидат на официалния Node.js и кликнете върху зеления бутон LTS, намерен в центъра на екрана.
За потребители на Linux и macOS кликнете върху Изтегляния раздел в подзаглавието на уебсайта.
След отваряне на Изтегляния ще видите инсталационни файлове и за трите основни платформи. Изберете пакет, който се поддържа от вашата система.
Стартирайте инсталационната програма, която се доставя с изтеглените файлове, и Node.js ще бъде инсталиран на вашия компютър. За да проверите дали програмата е инсталирана, отворете терминала и издайте следната команда:
$ възел -v
След инсталиране на Node.js, вече имате достъп до различни модули на JavaScript, което ще направи работата ви по-ефективна в дългосрочен план. Отворете директорията, в която искате да създадете вашата клиентска и сървърна архитектура, след това отворете терминала вътре в тази директория и изпълнете следната команда:
$ npm init -y
Тази команда се използва за създаване на пакета.json файл, който ви позволява да настроите и инсталирате различни Node.js пакети. Инсталирайте пакета за протокол WebSocket, като издадете следната команда в терминала:
$ npm инсталиране ws
Създайте три файла, наречени индекс.html, клиент.js и сървър.js. Както е посочено от имената, тези JavaScript файлове са архитектурата на клиента и сървъра на нашия протокол WebSocket. Сега най-накрая можем да започнем да пишем кода на нашите клиентски и сървърни приложения.
Създаване на WebSocket сървър
За да създадем WebSocket сървър, ще започнем, като напишем кода за сървъра. Отвори сървър.js файл, който сте създали във вашия текстов редактор или IDE в предишния раздел и въведете следните редове във файла.
const WebSocket = изискване ('ws');const ws = нов WebSocket.Сървър (порт: 8080);
конзола.дневник („Сървърът стартира“);
ws.on ('връзка', (wss) =>
конзола.log ("Свързан е нов клиент")
wss.send ('Добре дошли в сървъра!');
wss.on ('съобщение', (съобщение) =>
конзола.log ('Получено от сървъра: $ message');
wss.send ('Получих вашето съобщение:' + съобщение);
);
);
Сега ще обясним по-подробно какво прави всеки ред.
Обяснение на кода
Както споменахме по-горе, в Node има някои вградени модули.js, които значително улесняват работата ви. За да импортираме тези модули, ще използваме изискват ключова дума.
const WebSocket = изискване ('ws');const ws = нов WebSocket.Сървър (порт: 8080);
конзола.дневник („Сървърът стартира“);
Първият ред се използва за импортиране на Node.js модул WebSocket. Използвайки този модул, в следващия ред ние създаваме нашия WebSocket сървър, който слуша на порт 8080. The конзола.log () линия е просто там, за да ни уведоми, че сървърът е стартирал. Ще видите, че това се появява във вашия терминал, когато стартирате следната команда в терминала:
$ node сървър
В следващия ред установяваме връзка между сървъра и клиента.
ws.on ('връзка', (wss) =>конзола.log ("Свързан е нов клиент")
);
След като се установи връзка, wss.ред send () изпраща съобщение до клиента. В този случай съобщението е „Добре дошли на сървъра.”
wss.send ('Добре дошли в сървъра!');И накрая, wss.on („съобщение“) е за сървъра да получи съобщението от клиента. За потвърждение сървърът изпраща това съобщение обратно на клиента в последния ред.
wss.on ('съобщение', (съобщение) =>конзола.log ('Получено от сървъра: $ message');
wss.send ('Получих вашето съобщение:' + съобщение);
);
Създаване на клиент на WebSocket
От страна на клиента ни трябват и двата индекса.html файл и клиента.js файл. Разбира се, можете просто да добавите съдържанието от клиента.js във вашия индекс.html файл, но предпочитам да ги държа отделно. Нека първо разгледаме клиента.js код. Отворете файла и въведете следните редове във файла:
const сокет = нов WebSocket ('ws: // localhost: 8080');гнездо.addEventListener ('отворено', () =>
конзола.log ('Свързан със сървъра!');
);
гнездо.addEventListener ('съобщение', (msg) =>
конзола.log ('Клиентът получи: $ msg.данни');
);
const sendMsg = () =>
гнездо.send ('Показва как става амиго!');
Обяснение на кода
Като със сървъра.js, ще създадем нов WebSocket, който слуша порт 8080, който може да се види в localhost: 8080 раздел на кода.
const сокет = нов WebSocket ('ws: // localhost: 8080');В следващия ред, addEventListener кара вашия клиент да слуша всички събития, които се случват в момента. В този случай това би било създаване и стартиране на сървъра. След като връзката е установена, клиентът извежда съобщение към терминала.
гнездо.addEventListener ('отворено', () =>конзола.log ('Свързан със сървъра!');
);
За пореден път клиентът слуша всички събития, които се случват в момента. Когато сървърът изпрати съобщение, клиентът получава това и след това показва съобщението в терминала.
гнездо.addEventListener ('съобщение', (msg) =>конзола.log ('Клиентът получи: $ msg.данни');
);
Последните няколко реда са просто функция, при която клиентът изпраща съобщение до сървъра. Ще свържем това с бутон в нашия html файл за по-добро разбиране на това как работи.
const sendMsg = () =>гнездо.send ('Показва как става амиго!');
Подготовка на HTML файл
Накрая отворете индекса.html файл и добавете препратка към вашия клиент.js вътре в него. В моя случай просто ще добавя следните редове код:
Както можете да видите в редовете по-долу, src (вътре в маркера на скрипта) се отнася до клиентския javascript файл. Функцията sendMsg, която е създадена в клиента.js, също е свързан с функцията onClick на бутона.
Събиране на всичко заедно
Вече можете да започнете да тествате вашата клиентска и сървърна архитектура. Първо отворете терминала и изпълнете следната команда, за да стартирате сървъра си:
$ node сървър
След като стартирате сървъра си, отворете директорията, в която е вашият индекс.html файл и щракнете двукратно върху него, за да го отворите във вашия браузър. Ще видите следното съобщение в терминала, в което се посочва, че клиент се е свързал:
Можете също да проверите съобщенията, изпратени от сървъра до клиента, като натиснете бутона с десния бутон и след това отворите Огледайте прозорец. В този прозорец щракнете върху Конзола и ще можете да видите съобщенията, изпратени от сървъра.
След като щракнете върху бутона, както сървърът, така и клиентът ще могат да изпращат и получават съобщения един от друг.
Сървър:
Клиент:
Voilà, вашата WebSocket връзка е установена!
Заключение
Протоколът WebSocket е отличен начин за установяване на комуникация между клиент и сървър. Този протокол се използва в няколко области, включително мултиплейър браузър игри, чат системи на различни социални медийни платформи и дори процеси на сътрудничество между кодери.
