Webix Блог Създаване на уеб чат с помощта Webix и WebSockets API
Уеб чат - само между работещи в реално време на приложенията. Можете да получите изходния код на GitHub.
Частта сървър
За да работите (както от страна на сървъра), ние ще използваме NodeJS платформа. който в момента е най-добрата основа за създаването на приложения, които работят в реално време. Да предположим, че NodeJS, инсталирани на вашия компютър. Нека да започнем със създаването на нова папка за приложението и инсталиране на Фей библиотека, както и Connect пакет. За да инсталирате, ще трябва да изпълните следните команди:
NPM инсталирате Фей
NPM инсталирате свържете
Фей - е система за съобщения, който се предполага, че клиентските приложения могат да обменят съобщения в реално време, чрез създаване на Publishers (Издатели) и следните (абонати). Тази система може да се използва заедно с NodeJS и Ruby от страната на сървъра. Тя е много по-лесно да се работи с уеб гнезда (уеб контакти). "Connect" - е основният уеб сървър за NodeJS.
Ние започваме да се създаде сървър за нашия разговор. Тя ще бъде само един файл: server.js. Съдържанието на този файл е много проста:
Var свързване = изискват # 40; "Connect" # 41.
Фей = изисква # 40; "Фей" # 41; ;
// служи статични файлове
Var приложение = свържете # 40; # 41;
. употреба # 40; свържете. статичен # 40; "Обществено" # 41; # 41;
. употреба # 40; свържете. дървар # 40; "Dev" # 41; # 41. слушам # 40; 3000 # 41; ;
// първоначален Фей
Var Байо = нов Фей. NodeAdapter # 40; # 123; монтиране. "/ Фей" # 125; # 41; ;
Байо. прикрепете # 40; ап # 41; ;
Както можете да видите, ние създадохме уеб сървър, който се намира на порт 3000, който дава статични файлове от "обществен" папка, наречена. След това се свържете към сървъра Фей-адаптера. В създаването на страна на сървъра код необходим завършена.
WebSocket - това API с HTML, така че всякаква логика ще се помещава в кода на клиента. Нека да стартирате уеб сървър и преминете към страната на клиента.
Клиентската част
За да започнете, нека да създадете папка за клиентски файлове, както и да го наричаме "обществена". След това добавете към него файла "index.html", както следва:
ако # 40; текст # 41;
$$ # 40; "Чат" # 41. добави # 40; # 123;
потребител. user_name.
стойност. текст
# 125; # 41; ;
$$ # 40; "Съобщение" # 41. setValue # 40; "" # 41; ;
$$ # 40; "Съобщение" # 41. фокус # 40; # 41; ;
# 125;
webix. UI # 40; # 123;
редове. # 91;
# 123; шаблон. "Webix базиран чат". пишете. "Header" # 125.
# 123;
изглед. "Списък". идентификатор. "Чат". гравитацията. 3.
пишете. # 123; височина. "Auto" # 125.
шаблон. chat_template
# 125.
# 123; колони. # 91;
# 123; изглед. "Текст". идентификатор. "Съобщение". контейнер. "Тип съобщение тук". гравитацията. 3 # 125.
# 123; изглед. "Бутон". стойност. "Изпрати". кликнете. send_message # 125;
# 93; # 125;
# 93. пишете. "Space". марж. 2
# 125; # 41; ;
webix. UIManager. addHotKey # 40; "Enter". send_message. $$ # 40; "Съобщение" # 41; # 41; ;
webix. UIManager. SetFocus # 40; $$ # 40; "Съобщение" # 41; # 41; ;
//]]>
Нека да разгледаме генерирания код. Първо зареден Webix библиотека и създадете списък на незабавни съобщения и две контроли в долната част, за да добавите нови записи. След създаването на списъка, ние добавихме горещ бутон в прозореца на съобщението и да настроите фокуса към това поле за въвеждане. Можете да отворите страницата, създадена в браузъра, въведете броя на редовете и натиснете "Enter" ключ. Новото съобщение се появява в списъка. Ние все още не са използвали нито един специфичен код за уеб контакти, т.е. тези приложения все още не са преминали отвъд браузъра.
За да активирате уеб контакти, трябва да се коригира по-горе код:
- инициализира транспорт WebSocket протокол чрез добавяне на следния кодов фрагмент, преди създаването на потребителския интерфейс:
// първоначален Фей
webix. пълномощник. Фей. клиент = нов Фей. клиент # 40; "// Localhost: 3000 / Фей /" # 41; ;
// зададете уникален идентификатор на клиент
webix. пълномощник. Фей. clientId = webix. UID # 40; # 41; ;
- в Webix конфигурация Списък трябва да бъде зададен URL адреси, за да изтеглите и съхранение на данни. Тъй като ние сме с помощта на уеб контакти, тя няма да бъде действителните URL адреси, както и каналите за съобщения:
# 123; изглед. "Списък". URL адрес. "Фей-ГТ / данни". спаси. "Фей-ГТ / данни"
Това е всичко. Ако отворите страницата в браузъра, вие няма да видите никакви външни промени. Въпреки това, сега можете да отворите тази страница в множество / различни браузъри. Всички съобщения, които пишете в прозореца на браузъра ще бъдат показани в друг прозорец, както и обратното. Може би това не звучи твърде впечатляващо, но ние имаме създадена код ще работи за произволен брой браузъри и потребители от цял свят. За действителна употреба, трябва да се замени код «Localhost» в името на недвижими домакин.
заключение
Както можете да видите, че не е толкова трудно да се създаде бърз двупосочен обмен на съобщения в браузъра. Само няколко реда код, необходими, за да синхронизирате данни Webix компонент между множество потребители. Създаване на уеб чат - това е само един пример. Описаната техника може да се използва за по-полезни неща, като например данни за наблюдение в реално време или съвместни дейности на множество потребители.
Свързани статии