Як створити власний додаток для чату в режимі реального часу

Популярність програм обміну повідомленнями зростає. Останні кілька років створили такі програми, як WhatsApp, Telegram, Signal та Line.

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

Нещодавно я відвідав семінар, проведений Рухом вільного програмного забезпечення Карнатака в Бангалорі, де я був наставником групи студентів.

Під час взаємодії я спостерігав певні речі:

  1. Незважаючи на заохочення учнів до взаємодії з наставником, спілкування завжди було однобічним.
  2. Студенти часто почувались надто сором’язливими, щоб задавати питання під час сесій.
  3. Їм було зручніше ставити запитання та отримувати зворотний зв’язок в розмовах один на один.

Тож нам довелося знайти рішення пробити лід між наставниками та студентами. Місцева програма для чату стала в нагоді в цій ситуації. Люди люблять бути анонімними, що надає їм більше сил висловлюватися та запитувати в будь-який час і де завгодно. Це та сама мантра, якою користуються більшість популярних форумів в Інтернеті, таких як Reddit та 4chan. Це лише кілька гігантських прикладів напіванонімних додатків.

Тож я почав думати над цією ідеєю. Я придумав деякі основні вимоги та особливості.

  1. Користувачі реєструються, надаючи дескриптор, унікальний для кожного користувача (фіктивне ім'я). Іншим користувачам буде відкрито лише дескриптор. Тож люди можуть вільно обирати будь-яку ручку, а отже, вони залишаються анонімними.
  2. Учасник може бачити інших учасників, які перебувають у мережі. У них є можливість вийти на загальний доступ, який передаватиме повідомлення всім учасникам мережі в чаті.
  3. Для приватних повідомлень відправник повинен спочатку надіслати запит іншому учаснику. Після прийняття запиту інші учасники можуть поспілкуватися з ними в приватному чаті.

Технологія, використовувані інструменти

  1. MEAN стек (Mongo, Express, Angular, Node).
  2. Розетки, що дозволяють спілкуватися один на один в режимі реального часу
  3. AJAX для реєстрації та входу

Отже, як створити просту програму для чату?

У цьому підручнику я допоможу вам створити власну програму чату. Пізніше ви можете інтегрувати як віджет у будь-який проект! Цей підручник не буде зосереджений на повній розробці програми чату. Але це допоможе вам його створити.

Необхідна умова: Ви повинні знати деякі базові знання MEAN Stack, оскільки ми використовуємо їх для його створення.

Спочатку створіть структуру каталогів приблизно так.

Встановіть Node.js та MongoDB.

Для цього підручника ми використаємо AngularJS 1. Завантажте звідси бібліотеку AngularJS і скопіюйте її в папку lib в каталозі клієнта.

Якщо ви хочете прикрасити програму, ви можете завантажити будь-які бібліотеки CSS і скопіювати їх у lib.

Створення сервера

Крок 1 - Почніть проект:

Перейдіть до каталогу сервера та запустіть цю команду:

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-сторінки.
npm install --save socket.io npm install --save express

Це встановить необхідні залежності та додасть їх до package.json. До package.json буде додано додаткове поле, яке виглядатиме так:

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

Крок 3 - Створення сервера

Створіть сервер, який обслуговує порт 3000 і надсилатиме html при виклику.

Ініціалізуйте нове підключення до сокета, передавши об’єкт HTTP.

Підключення події буде прослуховувати вхідні сокети.

Кожен сокет випромінює подію відключення, яка буде викликатися щоразу, коли клієнт відключається.

  • socket.on чекає події. Щоразу, коли ця подія ініціюється, викликається функція зворотного виклику.
  • io.emit використовується для передачі повідомлення у всі підключені до нього сокети.

Синтаксис:

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 у каталозі клієнта, style.css у каталозі css та app.js у каталозі js у клієнті.

index.html:

Давайте напишемо простий HTML, який може прийняти наше повідомлення, а також відобразити його.

Include socket.io-client and angular.js in your HTML script.

socket.io serves the client for us. It defaults to connect to the host that serves the page. Final HTML looks something like this:

   Socket.IO chat         
    Send

    css/style.css:

    Give it some styling so that it looks like a chatbox. You can make use of any libraries.

    * { 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:

    Create an angular.js app and initialize a socket connection.

    • socket.on listens for a particular event. It calls a callback function whenever that event is called.
    • socket.emit is used to emit the message to the particular event.

    Basic syntax of both are:

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

    So whenever the message is typed and the button is clicked, call the function to send the message.

    Whenever the socket receives a message, display it.

    The JavaScript will look something like this:

    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); }); }]);

    Running the application

    Go to server directory where our server is present. Run the server using the following command:

    node server.js

    The server starts running on port 3000. Go to the browser and type the following url:

    //localhost:3000

    How to improve the same application

    You can design a database to save user details and messages. It would be good if the design was scalable so that you could add more features later.

    You need to install Mongoose or a MongoDB module to make use of a Mongo database:

    npm install --save mongoose

    or:

    npm install --save mongodb

    Here’s the documentation to use mongoose and the mongodb module.

    Here’s what my schema design looks like:

    { “_id” : ObjectId(“5809171b71e640556be904ef”), “name” : “Sudheesh Shetty”, “handle” : “sudheesh”, “password” : “556624370”, “phone” : “8888888888”, “email” : “[email protected]”, “friends” : [ { “name” : “abc”, “status” : “Friend” }, { “name” : “xyz”, “status” : “Friend” } ], “__v” : 0 }

    Here, the status of each member can be:

    • Friend: Stating that the member is a friend.
    • Pending: If the member has not yet accepted.
    • Blocked: If the member has blocked the other member.

    Suppose the member has rejected a chat request. The sender can then send a chat request again. A user can also save the messages by creating an extra collection. Each document will have the message, sender, receiver, and time.

    So design your database according to your specific needs and how you want to handle messages.

    2. Create REST APIs to serve the client. For example, an endpoint that sends a home page, from which users can make other requests.

    Few of my API endpoints are:

    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){})

    3. Think of some cool additional features and implement them.

    I have created a chat application of my own:

    sudheeshshetty/Chat

    Contribute to Chat development by creating an account on GitHub.github.com

    Here’s a quick glance at my chat application:

    Please do look at it, and give it a star at the top right if you like it. There are many ways I could improve this application. If you have any suggestions, send them to me at [email protected]

    You can follow me here on click the green heart if you found this helpful so that more people will see this. You can also follow me on GitHub and twitter.