Cara membina aplikasi sembang masa nyata anda sendiri

Aplikasi pemesejan semakin popular. Beberapa tahun kebelakangan ini telah membawa aplikasi seperti WhatsApp, Telegram, Signal, dan Line.

Orang nampaknya lebih suka aplikasi berasaskan sembang kerana mereka membenarkan interaksi masa nyata. Mereka juga menambah sentuhan peribadi untuk pengalaman.

Saya baru-baru ini menghadiri bengkel yang dijalankan oleh Perisian Perisian Percuma Karnataka di Bangalore di mana saya membimbing sekumpulan pelajar kolej.

Semasa interaksi, saya melihat beberapa perkara:

  1. Walaupun mendorong pelajar untuk berinteraksi dengan mentor, komunikasi selalu sepihak.
  2. Pelajar sering berasa malu untuk mengemukakan soalan semasa sesi berlangsung.
  3. Mereka lebih selesa bertanya dan mendapat maklum balas dalam perbualan satu lawan satu.

Oleh itu, kami terpaksa mencari jalan keluar untuk memecahkan masalah antara mentor dan pelajar. Aplikasi sembang tempatan sangat berguna dalam keadaan ini. Orang suka tidak dikenali, yang memberi mereka lebih banyak kekuatan untuk mengekspresikan diri dan bertanya bila-bila masa di mana sahaja. Ini adalah mantra yang sama yang digunakan oleh kebanyakan forum popular di internet, seperti Reddit dan 4chan. Ini hanyalah beberapa contoh aplikasi semi-anonim yang besar.

Oleh itu, saya mula memikirkan idea ini. Saya mengemukakan beberapa syarat dan ciri asas.

  1. Pengguna mendaftar dengan memberikan pegangan, yang unik untuk setiap pengguna (nama palsu). Hanya pemegang yang akan didedahkan kepada pengguna lain. Oleh itu, orang ramai bebas memilih pegangan dan oleh itu mereka tidak dikenali.
  2. Seorang ahli dapat melihat ahli lain yang berada dalam talian. Mereka mempunyai pilihan untuk pergi ke khalayak ramai, yang menyiarkan mesej kepada semua ahli dalam talian dalam sembang.
  3. Untuk mesej peribadi, pengirim harus terlebih dahulu menghantar permintaan kepada anggota lain. Anggota lain setelah menerima permintaan itu boleh berbual peribadi dengan mereka.

Teknologi, Alat yang digunakan

  1. MEAN Stack (Mongo, Express, Angular, Node).
  2. Soket untuk membolehkan komunikasi satu lawan satu dalam masa nyata
  3. AJAX untuk pendaftaran dan log masuk

Jadi bagaimana anda membuat aplikasi sembang sederhana?

Dalam tutorial ini, saya akan membantu anda membuat aplikasi sembang anda sendiri. Anda kemudian boleh mengintegrasikan sebagai widget ke dalam projek apa pun! Tutorial ini tidak akan tertumpu pada pengembangan lengkap aplikasi sembang. Tetapi ia akan membantu anda membina satu.

Pra-syarat: Anda perlu mengetahui beberapa pengetahuan asas mengenai MEAN Stack, kerana kami memanfaatkannya untuk membuatnya.

Pertama, buat struktur direktori seperti ini.

Pasang Node.js dan MongoDB.

Kami akan memanfaatkan AngularJS 1 untuk tutorial ini. Muat turun perpustakaan AngularJS dari sini dan salin ke folder lib di direktori Pelanggan.

Sekiranya anda ingin memperindah aplikasi, anda boleh memuat turun sebarang perpustakaan CSS dan menyalinnya ke lib juga.

Membina Pelayan

Langkah 1 - Mulakan projek:

Pergi ke direktori Server dan jalankan arahan ini:

npm init

Ini akan memulakan projek baru. Berikan semua butiran yang diperlukan. The package.json akan dicipta dan akan kelihatan seperti ini.

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

Langkah 2 - Pasang kebergantungan.

  • socket.io - adalah perpustakaan javascript untuk aplikasi web masa nyata. Ia membolehkan komunikasi dua hala masa nyata antara pelanggan web dan pelayan.
  • express - adalah kerangka aplikasi web Node.js. Ini menyediakan sekumpulan fitur untuk mengembangkan aplikasi web dan mudah alih. Seseorang dapat menanggapi permintaan HTTP menggunakan perisian tengah yang berbeza dan juga membuat halaman HTML.
npm install --save socket.io npm install --save express

Ini akan memasang kebergantungan yang diperlukan dan menambahkannya ke package.json. Medan tambahan akan ditambahkan ke package.json yang akan kelihatan seperti ini:

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

Langkah 3 - Membuat Pelayan

Buat pelayan yang berfungsi di port 3000 dan akan menghantar html apabila dipanggil.

Memulakan sambungan soket baru dengan meneruskan objek HTTP.

Sambungan acara akan mendengar soket masuk.

Setiap soket memancarkan peristiwa terputus yang akan dipanggil setiap kali pelanggan terputus.

  • socket.on menunggu majlis. Setiap kali peristiwa itu dicetuskan fungsi panggilan balik dipanggil.
  • io.emit digunakan untuk memancarkan mesej ke semua soket yang disambungkan kepadanya.

Sintaksnya adalah:

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

Buat pelayan dengan nama server.js. Sepatutnya:

  • mencetak mesej ke konsol semasa pengguna menyambung
  • dengarkan acara pesanan sembang dan siarkan mesej yang diterima ke semua soket yang disambungkan.
  • Setiap kali pengguna memutuskan hubungan, pengguna mesti mencetak mesej ke konsol.

Pelayan akan kelihatan seperti ini:

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

Membangun Pelanggan

Buat index.html di direktori klien, style.css di direktori css dan app.js di direktori js di klien.

index.html:

Marilah kita menulis HTML ringkas yang dapat menerima mesej kita dan juga memaparkannya.

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.