Читать нас в Telegram

«Хочу как Дуров»: пишем простой мессенджер

Рубрика: Переводы
11 мая 2017 17:09
68582
3

В последнее время растёт популярность приложений для обмена сообщениями. Пользователи предпочитают мессенджеры, потому что они позволяют взаимодействовать в режиме реального времени. В этой статье мы разберём процесс создания простого приложения для обмена мгновенными сообщениями. Не будем сильно углубляться в нюансы разработки: мы напишем рабочий мессенджер, который в дальнейшем можно будет улучшить.

Используемые технологии и инструменты

  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. Установка зависимостей

Выполнение этих команд установит необходимые зависимости и добавит их в package.json:

npm install --save socket.io
npm install --save express

Выглядеть они будут примерно так:

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

Шаг 3. Создание сервера

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

Синтаксис следующий:

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

Создайте сервер с именем server.js. Он должен:

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

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('index.html');
});

io.on('connection', function(socket){
  console.log('user connected');
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

Клиентская часть

Создайте файлы index.html в каталоге Client, style.css в каталоге CSS и app.js в каталоге js.

Client/index.html

Пусть это будет простой HTML-код, который получает и отображает наши сообщения.

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

 

socket.io служит для нас клиентом. Он по умолчанию подключается к хосту, обслуживающему страницу.

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



   Socket.IO chat
         
  
    

    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('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
    }

    Собеседникам могут быть присвоены следующие статусы:

    Предположим, что собеседник отклонил запрос на приватную беседу. В таком случае отправитель должен иметь возможность снова направить запрос.

    Неплохо было бы реализовать для пользователя функционал сохранения сообщений в дополнительные коллекции. Пусть каждый её объект содержит сообщение, отправителя, получателя и время. Спроектируйте вашу базу данных в соответствии с конкретными потребностями и методами обработки сообщений.

    Также вы можете создать 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»

    , внедренец-автоматизатор

    Темы: DIY, JavaScript, Node.js, Веб-разработка
    3