
Дізнайтесь більше про нові кар'єрні можливості в 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?