“Хочу як Дуров”: пишемо простий месенджер[*]

Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Останнім часом росте популярність додатків для обміну повідомленнями. Користувачі віддають перевагу месенджерам, тому що вони дозволяють взаємодіяти в режимі реального часу. У цій статті ми розберемо процес створення простого додатку для обміну миттєвими повідомленнями. Сильно не поглиблюватимемося в нюанси розробки: ми напишемо робочий месенджер, який надалі можна буде поліпшити.

Використовувані технології і інструменти

Стік MEAN (Mongo, Express, Angular, Node).
Сокети для прямого обміну повідомленнями.
AJAX для реєстрації і входу.

Підготовка

Структура майбутнього застосування виглядає приблизно так:

Встановіть Node.js і MongoDB. Крім того, нам знадобиться бібліотека AngularJS, викачайте її і скопіюйте в теку lib каталогу Client.

Щоб зробити призначений для користувача інтерфейс додатка привабливіше, ви можете скористатися будь-який CSS-бібліотекою. Викачайте її і скопіюйте в lib.

Примітка: створений месенджер можна буде інтегрувати в якості віджета у будь-який проект.

Серверна частина

Крок 1. Запуск проекту

Перейдіть в каталог Server і виконайте команду:

npm init

Вона запустить новий проект.

Вкажіть усі необхідні відомості. В результаті буде створений файл package.json приблизно наступного виду:

{ "name": " chat", " version": "1.0.0", " description": "Chat application", " main": "server.js", " scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "Your name", " license": " ISC"}

Крок 2. Установка залежностей

socket.io – JavaScript- бібліотека, яка надає двосторонній зв’язок клієнта і сервера в режимі реального часу;
express – фреймворк Node.js, надає набір функцій для розробки мобільних і веб-додатків. Дозволяє відповідати на HTTP-запити, використовуючи проміжне ПО, а також відображати HTML-сторінки.

Виконання цих команд встановить необхідні залежності і додасть їх в package.json:

npm install --save socket.ionpm install --save express

Виглядати вони будуть так:

"dependencies": { "express": "^4.14.0", "socket.io": "^1.4.8"}

Шаг 3. Створення серверу

Створимо сервер, який обслуговує порт 3000 і повертає HTML-файл при виклику. Для ініціалізації нового з’єднання сокету треба передати HTTP-об’єкт. Подія connection прослуховуватиме сокети, які входять, кожен сокет випускатиме подію disconnect, яка буде викликана при відключенні клієнта. Ми використовуватимемо наступні функції:

socket.on (...) – чекає подія, і коли вона відбувається, то виконує функцію зворотнього виклику.
io.emit (...) – використовується для відправки повідомлення усіх підключених сокетів.

Синтаксис наступний:

socket.on ('event', function (msg){}) io.emit ('event', 'message')

Створіть сервер з ім’ям server.js. Він повинен:

Виводити повідомлення в консоль при підключенні користувача.
Слухати подію chat message і транслювати отримане повідомлення на усі підключені сокети.
Коли користувач відключається, виводити повідомлення в консоль.

В результаті ваш сервер виглядатиме приблизно так:

var app = require ('express') ();var http = require('http').Server (app);var io = require#03#04;app.get#05;io.on#06;http.listen#07;

Клієнтськая частина

Створіть файли index.html у каталозі Client, style.css у каталозі CSS і app.js у каталозі js.

Client/index.html

Нехай це буде простий HTML-код, який отримує і відображає наші повідомлення.

Включіть скрипти socket.io - client і angular.js у ваш HTML:

socket.io служить для нас клієнтом. Він за умовчанням підключається до хосту, обслуговуючому сторінку.

В результаті index.html повинен виглядати приблизно так:

<!doctype html>

CSS/style.css

Щоб надати нашій сторінці зовнішньому вигляду вікна чату, додамо трохи стилів. Ви можете використати будь-яку CSS-бібліотеку. Отримаємо наступне:

* { margin: 0; padding: 0; box-sizing: border - box; }body { font: 13px Helvetica, Arial;}div { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }div input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }div button { width: 9%; background: rgb (130, 224, 255); border: none; padding: 10px; }#messages { list-style-type: none; margin: 0; padding: 0; }#messages li { padding: 5px 10px; }#messages li:nth-child(odd) { background: #eee; }

js/app.js:

Створіть Angular-додаток і ініціалізуйте з’єднання сокету. Для цього потрібні наступні функції:

socket.on (...) – слухає певну подію, і, коли вона відбувається, виконує функцію зворотнього виклику.
socket.emit (...) – використовується для відправки повідомлення конкретної події.

Синтаксис наступний:

socket.on ('event name', function (msg){});socket.emit ('event name', message);

Тепер, коли буде набраний текст повідомлення і натиснута кнопка, викличте функцію відправки повідомлення.

В результаті app.js виглядатиме приблизно так:

var app=angular.module ('myApp',[]);app.controller ('mainController',['$scope',function ($scope){ var socket = io.connect (); $scope.send = function (){ socket.emit ('chat message', $scope.message); $scope.message=""; } socket.on ('chat message', function (msg){ var li=document.createElement (" li");
li.appendChild (document.createTextNode (msg)); document.getElementById ("messages").appendChild (li); });}]);

Запуск додатку

Перейдіть в теку з server.js і запустите команду:

node server.js

Сервер почне роботу на порту 3000. Щоб в цьому переконатися, перейдіть по посиланню у браузері:

http://localhost:3000

Ваш власний месенджер готовий!

Що можна поліпшити?

Можна створити базу даних для зберігання інформації про користувачів і історію повідомлень. Краще, якщо вона буде масштабованою, тому що надалі це дозволить додати більше функцій.

Встановіть Mongoose або MongoDB для роботи з базами даних Mongo:

npm install --save mongoose

чи:

npm install --save mongodb

Можете ознайомитися з документацією по їх використанню: mongoose і mongodb.

Схема повинна вийти приблизно наступного виду:

{ "_id": ObjectId ("5809171b71e640556be904ef"), " name": "Monkey proger", " handle": " mkproger", " password": "proger228", " phone": " 8888888888", " email": "dontwritemepleez@gmail.com", " friends" :[ {
"name": " habrick", " status": " Friend" }, { "name": " javaman", " status": " Friend" } ], "__v": 0}

Співрозмовникам можуть бути присвоєні наступні статуси:

Friend – співрозмовник є другом.
Pending – співрозмовник доки не прийняв запит.
Blocked – співрозмовник заблокований.

Припустимо, що співрозмовник відхилив запит на приватну бесіду. У такому разі посилач повинен мати можливість знову направити запит.

Непогано було б реалізувати для користувача функціонал збереження повідомлень в додаткові колекції. Нехай кожен її об’єкт містить повідомлення, посилача, одержувача і час. Спроектуйте вашу базу даних відповідно до конкретних потреб і методів обробки повідомлень.

Також ви можете створити REST API для обслуговування клієнта. Наприклад, кінцеву точку, що відправляє домашню сторінку, з якої користувачі можуть виконувати інші запити.

Деякі з можливих кінцевих точок API:

app.post ('/register', function (req, res){}) app.post ('/login', function (req, res){}) app.post ('/friend_request', function (req, res){}) app.post ('/friend_request/confirmed', function (req, res){})

Ось який мессенджер вийшов у автора статті :

Вікно для входу

Зовнішній вигляд додатка

Початковий код додатки можна знайти на GitHub.

Адаптований переклад статті “How to build your own real – time chat app”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?

Post Views: 1 266