כיצד לבנות אפליקציית צ'אט משלך בזמן אמת

תִכנוּת

אפליקציות העברת הודעות גואה בפופולריות. בשנים האחרונות הביאו אפליקציות כמו WhatsApp, Telegram, Signal ו- Line.

נראה כי אנשים מעדיפים יישומים מבוססי צ'אט מכיוון שהם מאפשרים אינטראקציה בזמן אמת. הם גם מוסיפים נופך אישי לחוויה.

לאחרונה השתתפתי בסדנה שערכה תנועת התוכנה החופשית קרנטקה בבנגלור בה הדרכתי קבוצה של סטודנטים.

במהלך האינטראקציות ראיתי דברים מסוימים:

  1. למרות עידוד התלמידים לקיים אינטראקציה עם המנטור, התקשורת הייתה תמיד חד צדדית.
  2. התלמידים הרגישו לעתים קרובות ביישנים מכדי לשאול שאלות במהלך המפגשים.
  3. היה להם יותר נוח לשאול שאלות ולקבל משוב בשיחות אחד על אחד.

אז היינו צריכים למצוא פיתרון לשבור את הקרח בין חונכים לסטודנטים. יישום צ'אט מקומי היה שימושי במצב זה. אנשים אוהבים להיות אנונימיים, מה שמעניק להם יותר כוח לבטא את עצמם ולשאול בכל עת ובכל מקום. זו אותה מנטרה בה משתמשים רוב הפורומים הפופולאריים באינטרנט, כמו Reddit ו- 4chan. אלה רק כמה דוגמאות ענק לאפליקציות חצי אנונימיות.

אז התחלתי לחשוב על הרעיון הזה. הגעתי לכמה מהדרישות והתכונות הבסיסיות.

  1. משתמשים נרשמים על ידי מתן ידית, שהיא ייחודית לכל משתמש (שם דמה). רק הידית תתגלה למשתמשים אחרים. כך שאנשים חופשיים לבחור בכל ידית ולכן הם נשארים אנונימיים.
  2. חבר יכול לראות חברים אחרים שאינם מקוונים. יש להם אפשרות לצאת לציבור, המשדר את ההודעה לכל החברים המקוונים בצ'אט.
  3. בהודעות פרטיות, השולח צריך לשלוח תחילה בקשה לחבר האחר. חברים אחרים לאחר קבלת הבקשה יכולים לשוחח איתם בצ'אט פרטי.

טכנולוגיה, כלים בשימוש

  1. MEAN Stack (מונגו, אקספרס, זוויתי, צומת).
  2. שקעים המאפשרים תקשורת אישיים בזמן אמת
  3. AJAX להרשמה וכניסה

אז איך יוצרים אפליקציית צ'אט פשוטה?

במדריך זה, אני אעזור לך ליצור יישום צ'אט משלך. בהמשך תוכלו להשתלב כווידג'ט בכל פרויקט! הדרכה זו לא תתרכז בפיתוח מלא של אפליקציית צ'אט. אבל זה יעזור לך לבנות אחד כזה.

דרישה מוקדמת: עליכם להכיר קצת ידע בסיסי ב- MEAN Stack, מכיוון שאנו משתמשים בו כדי לבנות אחד כזה.

ראשית, צור מבנה ספריות משהו כזה.

התקן את Node.js ו- MongoDB.

נשתמש ב- AngularJS 1 לצורך הדרכה זו. הורד מכאן את ספריית AngularJS והעתק אותה לתיקיית lib בספריית הלקוחות.

אם אתה רוצה לייפות את היישום תוכל להוריד כל ספריות CSS ולהעתיק אותן גם ל- lib.

בניית השרת

שלב 1 - התחל את הפרויקט:

עבור לספריית השרת והפעל פקודה זו:

npm init

זה יתחיל פרויקט חדש. ספק את כל הפרטים הנדרשים. החבילה . 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.