Websocket с Node.js

Уеб приложенията се променят и развиват, което прави нуждите на потребителите различни от момента на създаване на първия протокол за връзка в мрежата. Следователно протоколът HTTP еволюира през годините, но все още не е достигнал ниво в реално време, като връзка TCP между два отбора.
Тези ограничения, вместо да навредят на разработчиците и потребителите, се превърнаха в източник на мотивация и творчество, генерирайки решения, които ни позволяват не само да подражаваме на система за предаване в реално време, но и чрез HTTP направете го почти родно.
WebsocketТова е мястото, където Websocket, сравнително нов протокол, който се поддържа само от най -модерните браузъри, който ни позволява да премахнем всички ограничения на HTTP и по този начин да можем да комуникираме ефективно чрез заглавки ПОЛУЧАВАЙТЕ.
Websocket Все още е в период на активно съзряване, така че е много възможно да не го намерим в нови решения, за щастие в Node.js вече имаме някои инструменти, които ни позволяват да се справяме с тях, без да се налага да разчитаме на нашата изобретателност за изграждане на инструменти от по-ниско ниво.
ИзискванияТова е усъвършенстван урок, така че първо ще изискваме функционална инсталация на Node.js В нашата система можем да разгледаме този урок, преди да продължим да се задълбочаваме в него. Освен това ще ни трябват администраторски разрешения, за да можем да инсталираме библиотеките, които ще използваме. Трябва да сме запознати с понятията за JavaScript например обратно повикване и анонимни функции. Накрая трябва да имаме текстов редактор като Възвишен текст което ни позволява да напишем различните кодове, които са в примерите.
За да започнем да създаваме приложение, което ни позволява да използваме Websockets Първо трябва да изградим малка структура, това е много просто, но необходимо, тази структура ще се състои от:
1- Папка, в която ще съхраняваме файловете на нашия проект.
2- Файл с име server.js, този файл, както показва името му, ще бъде сървърът, чрез който ще установим връзката в реално време, използвайки Websockets.
3- Файл с име client.html, този файл ще бъде интерфейсът за комуникация с нашия сървър през браузъра, необходимо е да имаме същия, за да можем да изпращаме и получаваме съответната информация.
Тъй като нашата структура е дефинирана сега, можем да започнем да приемаме няколко реда код, за това трябва да започнем с инсталирането на външна библиотека, наречена ws в нашата среда, тъй като това е тази, която ще ни позволи да използваме въпросния протокол. За да инсталираме тази библиотека, просто трябва да отворим нашата конзола Node.js, ние се намираме в папката, където ще бъдат нашите файлове, и поставяме следната команда:

 npm инсталирайте ws

Когато го изпълним, можем да видим следния резултат в нашата командна конзола:

След като инсталираме библиотеката, можем да продължим работата си, сега в нашия файл server.js Трябва да напишем следния код, първо да видим от какво се състои, след което ще го обясним:

 var WSServer = изисква ('ws'). Сървър, wss = нов WSServer ({порт: 8085}); wss.on ('connection', function (socket) {socket.on ('message', function (msg) {console.log ('Получено:', msg, '\ n', 'From IP:', socket. upgradeReq.connection.remoteAddress); if (msg === 'Hello') {socket.send ('Yes it works!');}}); socket.on ('close', function (code, desc) {console .log ('Офлайн:' + код + '-' + desc);});});

Първото нещо, което правим, е да изискваме библиотеката ws което току -що инсталирахме и веднага в същата инструкция извикайте вашия клас Сървър, след това създаваме екземпляр, с който ще създадем сървър, който работи на порта 8085Този порт може да бъде всичко, до което имаме достъп. В този случай се използва 8085, така че да няма конфликт с други услуги, които в момента са в тази тестова среда.
Тъй като вече сме дефинирали нашия екземпляр, ще приложим метода.На () за събитието за връзка, след това в обратно повикване от него предаваме обект, наречен гнездо, с това ще получим съобщенията от клиента и сме написали рутина, която ако получим думата "Здравейте" сървърът ще върне съобщение, където от своя страна също ще отпечатаме нещо в командната конзола. И накрая, ако затворим връзката, ще имаме само едно съобщение на конзолата.
След като имаме нашия сървър, е време да изградим наш клиент, за него във файла client.html ще дефинираме структура, в която ще поставим html тагове и a JavaScript който ще функционира като връзка към нашия сървър. Нека да видим как изглежда нашият файл:

 Изпращане на клиент от Websockets

Частта HTML е съвсем проста, имаме въвеждане на тип текст и бутон за изпращане, както и a div наречен изход, който е този, който ще получи информацията от сървъра, за да я покаже на потребителя. Интересното идва в етикета, където първото нещо, което правим, е да създадем обект от типа WebSocket и ние посочваме маршрута, където трябва да го намерите, в нашия случай това е localhost: 8085 и така можем да видим, че това, което направихме в server.js. След това свързваме нашите изпращащи, текстови и изходни елементи с променливи, които можем да използваме.
Тогава това, което правим, е да дефинираме всеки от методите, които можем да получим от сървъра, така че всеки път, когато изпращаме нещо, това ще бъде записано в нашия изход, всичко благодарение на метода изпрати (). Другият метод, който използваме, е onmessage () което се активира само ако нашият сървър реагира и добавим резултата в нашия HTML.
Накрая използваме методите onclose () Y onerror (), първият ни дава съобщение, когато връзката с Websocket е спрян или затворен, а вторият ни информира в случай на грешка. С това трябва само да стартираме сървъра в нашата конзола и да приложим нашия пример за работа, за това използваме следната команда:

 възел server.js

Това ще стартира сървъра, но за да проверим функционалността на нашия код, трябва да изпълним нашия client.html файл в избрания от нас браузър и да напишем нещо в текстовото поле и да натиснем бутона за изпращане, това ще генерира комуникация с websocket и можем да видим отговора от конзолата:

На изображението можем да видим как командната конзола отпечатва полученото съобщение, дори регистрира IP адреса, от който получава данните, това е, което програмирахме в нашия файл server.js, където също така посочихме, че ако получим думата „Здравей“, ще изпратим съобщение за отговор, което е точно това, което виждаме в прозореца на браузъра на същото изображение. Сега, ако опресним браузъра, връзката е прекъсната, това също се регистрира от нашето приложение, нека видим:

И накрая, ако затворим връзката в нашата конзола с CTRL + C За да спре сървъра, нашият браузър задейства манипулатора на грешки и там ще видим ново съобщение:

Ако бяхме наблюдатели, може да сме забелязали нещо важно, в нито един момент, за да получим отговори, не трябваше да опресняваме браузъра или да направим заявка Аякс, всичко е двупосочно директно с WebSockets, това е, което се нарича реално време.
Това, което показахме, е един от най -елементарните и ръчни начини, които съществуват, но ни помага да знаем какъв е работният процес, но реалната функционалност, готова за производствени среди, се постига с библиотеката socket.io, това прави същото, което направихме в урока, но в много по -компактен и по -малко податлив на грешки от разработчика, което ни позволява да се съсредоточим само върху логиката на приложението, а не толкова върху техническата част от него.
За инсталиране socket.io просто трябва да направим а npm инсталирайте socket.io и с това от хранилището ще изтеглим най -новата стабилна версия на библиотеката, което ще ни позволи да започнем нашето развитие.
С това приключихме този урок, с който направихме важна стъпка Node.js като знаете как да използвате Websockets, тази технология става все по -важна всеки ден, тъй като ни помага да създаваме приложения, за които никога не се е мислило в мрежата. Важно е също така да се документираме за протокола, тъй като това е начин да разберем потенциала на това, което можем да постигнем просто чрез разработване на приложения.