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


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

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

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

  1. Стік MEAN (Mongo, Express, Angular, Node).
  2. Сокети для прямого обміну повідомленнями.
  3. 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:

%MINIFYHTML84bba383ae520aa3ddfafeaf9d10fa022%%MINIFYHTML84bba383ae520aa3ddfafeaf9d10fa023%

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

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

<!doctype html>%MINIFYHTML84bba383ae520aa3ddfafeaf9d10fa024%%MINIFYHTML84bba383ae520aa3ddfafeaf9d10fa025%%MINIFYHTML84bba383ae520aa3ddfafeaf9d10fa026%%MINIFYHTML84bba383ae520aa3ddfafeaf9d10fa027%

     

    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?


    Залишити відповідь

    Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *