Phenquestions
Протокол ВебСоцкет омогућава двосмерну комуникацију између клијента и сервера. Овај поступак је сличан начину на који се одвијају позиви на вашем телефону: прво успоставите везу, а затим можете започети међусобну комуникацију. Протокол ВебСоцкет користи се готово свуда - од претраживачких игара за више играча до апликација за ћаскање.
Овај чланак вам показује како створити ВебСоцкет протокол и користити га за комуникацију са више корисника.
Предуслови
Пре него што пређете на процес креирања и употребе ВебСоцкет протокола, прво морате да инсталирате неколико ствари које су потребне за овај процес. Прва ствар коју треба да инсталирате је Ноде.јс, платформа на страни сервера која претвара програмски језик ЈаваСцрипт у машински код који вам омогућава да ЈаваСцрипт покренете директно на рачунару. Да бисте инсталирали Ноде.јс, корисници Виндовс-а могу једноставно да оду на званични Ноде.јс и кликните на зелено дугме ЛТС које се налази у средини екрана.
За кориснике Линука и мацОС-а кликните на Преузимања одељак у подзаглављу веб странице.
Након отварања Преузимања У одељку ћете видети инсталационе датотеке за све три главне платформе. Изаберите пакет који ваш систем подржава.
Покрените програм за инсталирање који долази са преузетим датотекама и Ноде.јс ће бити инсталиран на вашем рачунару. Да бисте проверили да ли је програм инсталиран, отворите терминал и издајте следећу команду:
$ чвор -в
Након инсталирања Ноде-а.јс, сада имате приступ разним ЈаваСцрипт модулима, што ће ваш рад дугорочно учинити ефикаснијим. Отворите директоријум у којем желите створити архитектуру клијента и сервера, а затим отворите терминал унутар тог директоријума и покрените следећу наредбу:
$ нпм инит -и
Ова наредба се користи за креирање пакета.јсон датотека која вам омогућава да подесите и инсталирате различите Ноде.јс пакете. Инсталирајте пакет протокола ВебСоцкет издавањем следеће наредбе у терминалу:
$ нпм инсталирај вс
Направите три датотеке, тзв индекс.хтмл, клијент.јс и сервер.јс. Као што показују имена, ове ЈаваСцрипт датотеке су архитектура клијента и сервера нашег ВебСоцкет протокола. Сада коначно можемо почети са писањем кода наших клијентских и серверских апликација.
Креирање ВебСоцкет сервера
Да бисмо креирали ВебСоцкет сервер, започет ћемо писањем кода за сервер. Отвори сервер.јс датотеку коју сте креирали у програму за уређивање текста или ИДЕ у претходном одељку и унесите следеће редове у датотеку.
цонст ВебСоцкет = рекуире ('вс');цонст вс = нови ВебСоцкет.Сервер (порт: 8080);
конзола.лог ("Сервер Стартед");
вс.он ('веза', (всс) =>
конзола.лог ("Нови клијент повезан")
всс.сенд ('Добродошли на сервер!');
всс.он ('порука', (порука) =>
конзола.лог ('Сервер Рецеивед: $ мессаге');
всс.сенд ('Гот Иоур Мессаге:' + порука);
);
);
Сада ћемо детаљније објаснити шта свака линија ради.
Објашњење кода
Као што је претходно поменуто, у Нодеу су доступни неки уграђени модули.јс који вам знатно олакшавају посао. За увоз ових модула користићемо захтевају кључна реч.
цонст ВебСоцкет = рекуире ('вс');цонст вс = нови ВебСоцкет.Сервер (порт: 8080);
конзола.лог ("Сервер Стартед");
Прва линија се користи за увоз чвора.јс ВебСоцкет модул. Користећи овај модул, у следећем реду креирамо наш ВебСоцкет сервер који слуша на порту 8080. Тхе конзола.Пријава() линија је једноставно ту да нас обавести да је Сервер почео. Видећете да се ово појављује у вашем терминалу када покренете следећу команду у терминалу:
$ ноде сервер
У следећем реду успостављамо везу између сервера и клијента.
вс.он ('веза', (всс) =>конзола.лог ("Нови клијент повезан")
);
Након успостављања везе, всс.линија сенд () шаље поруку клијенту. У овом случају порука је „Добродошли на сервер.”
всс.сенд ('Добродошли на сервер!');Коначно, всс.он ('порука') је да сервер прими поруку од клијента. За потврду, сервер ову поруку враћа клијенту у последњем реду.
всс.он ('порука', (порука) =>конзола.лог ('Сервер Рецеивед: $ мессаге');
всс.сенд ('Гот Иоур Мессаге:' + порука);
);
Креирање ВебСоцкет клијента
За клијентску страну су нам потребна оба индекса.хтмл датотеку и клијента.јс датотеку. Наравно, можете једноставно додати садржај од клијента.јс у ваш индекс.хтмл датотеку, али више волим да их држим одвојено. Погледајмо прво клијента.јс код. Отворите датотеку и у њу унесите следеће редове:
цонст соцкет = нев ВебСоцкет ('вс: // лоцалхост: 8080');утичница.аддЕвентЛистенер ('опен', () =>
конзола.лог ('Повезан са сервером!');
);
утичница.аддЕвентЛистенер ('порука', (мсг) =>
конзола.лог ('Клијент примљен: $ мсг.подаци ');
);
цонст сендМсг = () =>
утичница.сенд ('Како се то чини амиго!');
Објашњење кода
Као са сервером.јс, створићемо нови ВебСоцкет који преслушава порт 8080, што се може видети у лоцалхост: 8080 одељак кода.
цонст соцкет = нев ВебСоцкет ('вс: // лоцалхост: 8080');У следећем реду, аддЕвентЛистенер тера вашег клијента да слуша све догађаје који се тренутно дешавају. У овом случају то би било стварање и покретање сервера. Једном када је веза успостављена, клијент на терминал шаље поруку.
утичница.аддЕвентЛистенер ('опен', () =>конзола.лог ('Повезан са сервером!');
);
Још једном, клијент слуша све догађаје који се тренутно дешавају. Када сервер пошаље поруку, клијент то прима, а затим приказује поруку у терминалу.
утичница.аддЕвентЛистенер ('порука', (мсг) =>конзола.лог ('Клијент примљен: $ мсг.подаци ');
);
Последњих неколико редова је једноставно функција у којој клијент шаље поруку серверу. Повезаћемо ово са дугметом у нашој хтмл датотеци ради бољег разумевања како ово функционише.
цонст сендМсг = () =>утичница.сенд ('Како се то чини амиго!');
Припрема ХТМЛ датотеке
На крају отворите индекс.хтмл датотеку и додајте референцу на свог клијента.јс у њему. У мом случају, једноставно ћу додати следеће редове кода:
Као што видите у доњим редовима, срц (унутар ознаке скрипте) односи се на клијентску јавасцрипт датотеку. Функција сендМсг која је креирана у клијенту.јс, такође је повезан са функцијом онЦлицк дугмета.
Састављајући све заједно
Сада можете започети тестирање архитектуре клијента и сервера. Прво отворите терминал и покрените следећу команду да бисте покренули сервер:
$ ноде сервер
Након покретања сервера, отворите директоријум у којем се налази ваш индекс.хтмл датотека и двапут кликните на њу да бисте је отворили у свом прегледачу. Видећете да се на терминалу појављује следећа порука у којој се наводи да се клијент повезао:
Поруке послате са сервера клијенту такође можете проверити притиском на тастер десним тастером миша и отварањем Прегледајте прозор. У овом прозору кликните на Конзола и моћи ћете да видите поруке послате са сервера.
Једном када кликнете на дугме, и сервер и клијент ће моћи да шаљу и примају поруке једни од других.
Сервер:
Клијент:
Воила, успостављена је ваша ВебСоцкет веза!
Закључак
Протокол ВебСоцкет је одличан начин за успостављање комуникације између клијента и сервера. Овај протокол се користи у неколико поља, укључујући игре за прегледаче за више играча, системе ћаскања различитих платформи друштвених медија, па чак и процесе сарадње између кодера.
