Пишем чат на Tornado, Backbone и уеб сокети

В този урок ще създадем чат, който работи на сървър Tornado. Уеб сокетите ще се използват за обмен на съобщения между потребителите и сървъра. Нека вземем MongoDB като база данни за съхраняване на съобщения. Демо чат.

Настройка на околната среда

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

Ако все още не сте инсталирали пакета virtualenv, инсталирайте го с помощта на системния мениджър на пакети. Например в Ubuntu инсталирането на virtualenv е както следва:

Сега нека инсталираме уеб сървъра Tornado в нашата виртуална среда с помощта на програмата pip.

Ще използваме базата данни MongoDB, за да съхраняваме чат съобщения. Инсталирайте самия Mongo и неговия драйвер за Python - pymongo.

Сървърна част

Нека напишем бекенд за нашия чат в Tornado. Сървърът за съобщения ще слуша за връзки на порт 8888 и ще добави идентификаторите на всички активни клиенти към списъка WebSocketsPool. Когато сървърът получи съобщение от клиента, то се съхранява в базата данни. След това известията за новото съобщение се изпращат до всички останали участници в разговора.

По този начин можем да постигнем актуализации на чата в реално време за всички потребители. В директорията tornado-chat създайте файл server.py със следното съдържание:

HTML шаблон

Класът MainHandler е необходим за генериране на HTML страница със списък от съобщения и формуляр. Няма нищо интересно в нашия шаблон. Копирайте неговия изходен код от хранилището на github във файла index.html.

Клиентска логика на приложението

Създайте статична директория в основата на проекта. Ще има статични файлове на нашия чат - снимки, стилове и скриптове.

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

Когато бъде уведомено за ново съобщение, събитието onmessage от класа WebSocket ще бъде задействано. Самото съобщение ще бъде предадено на клиентите, също във формат JSON, и след това ще бъде анализирано в javascript обект с помощта на функцията JSON.parse.

Когато се извика събитието onmessage, към чата се добавя ново съобщение. За да създадем красива скриптова архитектура, ще използваме библиотеката Backbone.js. Ако читателят все още не е запознат с Backbone, тогава е време да се запознае по-добре с тази рамка.

Създайте нова директория static/js и добавете там нов файл main.js.

Външен вид

За да проектирате външния вид на страницата по-горе, ще ви е необходима CSS рамката Twitter-Bootstrap. Изтеглете най-новата версия на библиотеката и разархивирайте архива в директорията static/lib на нашия проект.

Създайте файл style.css в директорията static/css. Вземете съдържанието на стиловия файл от хранилището на github.

Стартирайте Tornado

В основата на проекта изпълнете следните команди от конзолата:

Първата команда активира виртуалната среда, създадена по-рано с virtualenv. В самото начало вече го активирахме. Авторът е оставил тази команда тук, в случай че читателят рестартира своята обвивка и случайно забрави да активира средата.

Втората команда - python server.py стартира Tornado сървъра, който предоставя нашия чат.

Не забравяйте да стартирате MongoDB сървъра, ако не се стартира автоматично след инсталирането. В Ubuntu/Debian Mongo започва така:

Сега отворете чата в браузър, който поддържа websockets: http://127.0.0.1:8888/.