كيف أنشأت تطبيق دردشة عام ومجهول في JavaScript

نحن جميعًا على دراية بالرسائل الفورية ونستخدمها للدردشة مع الأشخاص في الوقت الفعلي. في بعض الأحيان ، على الرغم من ذلك ، قد نرغب في تطبيق يتيح لنا إرسال رسائل مجهولة إلى الأصدقاء ، أو الدردشة مع الغرباء على مقربة من مجهول. مثال على مثل هذا التطبيق هو Truth ، والذي يتيح لك التحدث مع الأشخاص الموجودين في قائمة جهات الاتصال الخاصة بك دون الكشف عن هويتك.

في هذا البرنامج التعليمي ، سأوضح لك كيفية إنشاء تطبيق دردشة عام مجهول في JavaScript (باستخدام NodeJS و Express على الخادم ، و VanillaJS على العميل) و Pusher. يسمح لنا Pusher ببناء تطبيقات واقعية قابلة للتطوير وموثوقة نظرًا لأننا نحتاج إلى تسليم رسائل الدردشة في الوقت الفعلي ، فهذا عنصر أساسي في تطبيق الدردشة. الصورة أدناه تصور ما سنبنيه:

ابدء

دعنا نبدأ بالتسجيل للحصول على حساب Pusher مجاني (أو تسجيل الدخول إذا كان لديك حساب بالفعل). بمجرد تسجيل الدخول ، قم بإنشاء تطبيق Pusher جديد من لوحة القيادة وقم بتدوين معرف التطبيق والمفتاح والسر ، والتي تعتبر فريدة من نوعها للتطبيق.

لإنشاء تطبيق Pusher جديد ، انقر فوق Your appsالقائمة الجانبية ، ثم انقر فوقCreate a new appزر أسفل الدرج. هذا يعرض معالج الإعداد.

  1. أدخل اسمًا للتطبيق. في هذه الحالة ، سأسميها "دردشة".
  2. حدد مجموعة.
  3. حدد الخيار "إنشاء تطبيق لبيئات متعددة" إذا كنت تريد أن يكون لديك مثيلات مختلفة للتطوير والتشغيل المرحلي والإنتاج.
  4. حدد Vanilla JS كواجهة أمامية و NodeJS كخلفية.
  5. أكمل العملية بالنقر فوق Create my appالزر لإعداد مثيل التطبيق الخاص بك.

كود المتابعة الخادم

We need a backend which will serve our static files and also accept messages from a client and then broadcast to other connected clients through Pusher. Our backend will be written in NodeJS, so we need to set it up.

We need a package.json file, and I’ll add it by running the command below. I’ll use the defaults provided by hitting enter for every prompt.

$ npm init

With the package.json file added, I’ll install Express, body-parser, and Pusher npm packages. Run the following command:

$ npm install –save pusher express body-parser

With these packages installed, let’s add a new file called server.js with the following content:

var express = require('express');var bodyParser = require('body-parser');var Pusher = require('pusher');
var app = express();app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));
var pusher = new Pusher({ appId: "APP_ID", key: "APP_KEY", secret: "APP_SECRET", cluster: "APP_CLUSTER" });
app.post('/message', function(req, res) { var message = req.body.message; pusher.trigger( 'public-chat', 'message-added', { message }); res.sendStatus(200);});
app.get('/',function(req,res){ res.sendFile('/public/index.html', {root: __dirname });});
app.use(express.static(__dirname + '/public'));
var port = process.env.PORT || 5000;app.listen(port, function () { console.log(`app listening on port ${port}!`)});

With the code above, we have defined an end-point /message which will be used by one client to send a message to another through Pusher. The other routes are used to serve the static files which we will add later.

Replace the placeholder strings App ID, Secret, and Key with the values from your Pusher dashboard. Add this statement "start": "node server.js" in the script property of our package.json file. This will allow us to start the server when we run npm start.

Building the frontend

Moving on to the frontend, let’s add a new folder called public. This folder will contain our page and JavaScript files. Add a new file called style.css with the content below, which will hold our style definition for the page.

@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");.chat{ list-style: none; margin: 0; padding: 0;}
.chat li{ margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dotted #B3A9A9;}
.chat li.left .chat-body{ margin-left: 60px;}
.chat li.right .chat-body{ margin-right: 60px;}
.chat li .chat-body p{ margin: 0; color: #777777;}
.panel .slidedown .glyphicon, .chat .glyphicon{ margin-right: 5px;}
.body-panel{ overflow-y: scroll; height: 250px;}
::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5;}
::-webkit-scrollbar-thumb{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555;}

Add another file called index.html with the markup below.