چگونه اپلیکیشن چت real-time بسازیم

در اینجا قصد داریم یک وب اپلیکیشن چت بسیار ساده بسازیم. این اپلیکیشن جنبه کاربردی نداره و بیشتر قصد داره شما رو با نحوه کار اپلیکیشن های real-time آشنا کنه. برای این کار از کتابخانه socket.io استفاده کردیم که امکان یک ارتباط آنی و دو‌طرفه بین کلاینت(کاربر) و سرور را فراهم میکند.

پس از تکمیل مراحل پروژه در نهایت ما یک وب اپلیکیشن بسیار ساده داریم که داخل مرورگر بازش میکنیم یک فیلد ورود متن داره که میتونیم پیام مورد نظر رو داخلش بنویسیم و پس از اینکه برروی send کلیک میکنیم پیام ارسال میشه که در بالای همون صفحه پیام‌های ارسالی قابل مشاهده هست. اگه وب اپلیکیشن رو در چندین تب باز کنیم پیام‌های ارسالی از یک تب در تمامی دیگر تب ها قابل مشاهده است که این امر نشان میدهد socket.io چگونه پیام‌ها رو به صورت آنی به تمامی کلاینت های متصل ارسال میکند.

قبل از هر چیز دایرکتوری های پروژه رو بسازید، به این صورت:

Node.js رو نصب کنید.(نحوه نصب برای سیستم عامل های مختلف در خود سایت Node.js توضیح داده شده)

برای بخش سمت کاربر یا کلاینت از فریم ورک انگولار استفاده میکنیم. AngularJS رو از اینجا دانلود و در پوشه lib در دایرکتوری Client کپی کنید.

ساخت سرور

وارد دایرکتوری Server بشید و در خط فرمان این دستور را اجرا کنید:

npm init

این دستور یک پروژه جدیدnode ایجاد میکنه. تمام جزئیات و پکیج های مورد نیاز برای نصب در فایلی به نام package.json قرار میگیرد.

پس از اجرای دستور سؤالاتی از شما میپرسه مثل نام پروژه، نسخه و .. .

در نهایت محتوای فایل 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"
}

نصب پکیج های مورد نیاز(dependencies)

socket.io یک کتابخانه جاوااسکریپت جهت برقراری ارتباط لحظه ای(real-time) است که در وب اپلیکیشن ها استفاده میشود. Socketio امکان ارتباط دو‌طرفه و لحظه به لحظه بین وب کلاینت و سرور فراهم میکنه.

Express یک فریم ورک وب برپایه Node.js میباشد. مجموعه‌ای از امکانات رو جهت توسعه وب و اپلیکیشن موبایل در اختیارمان میگذارد. به عنوان مثال میتونه به ریکوئست HTTP پاسخ بده و متناسب با اون یک صفحه HTML رو در خروجی به کاربر نمایش بده.

برای نصب socket.io و express در خط فرمان در پوشه Server این دستورات را اجرا کنید:

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

پس از اجرا دستورات بالا این دو مورد نصب شده و به قسمت dependencies فایل package.json افزوده میشوند:

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

حالا یک سرور برروی پورت ۳۰۰۰ میسازیم که پس از دریافت ریکوئست صفحه چت رو به مرورگر بر میگرداند.

مراحل کار به این صورته:

یه کانکشن سوکت میسازیم.(Initialize socket connection)

منتظر میمونیم که کانکشن سوکت برقرار شه(Event connection)

در صورتی که ارتباط یک کلاینت قطع بشه این رویداد به سرور منتشر میشه (disconnect event)

معرفی توابع socket.on() و io.emit():

• socket.on منتظر یک رویداد میماند و هنگامی که یک رویداد اتفاق افتاد تابعی که ما برایش مشخص کرده‌ایم را اجرا میکند.

• io.emit پیام مورد نظر را به تمام سوکت های متصل به آن ارسال میکند.

توابع گفته شده این صورت مورد استفاده قرار میگیرند:

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

می خواهیم کد سمت سرور را بنویسیم، کدها باید به این صورت عمل کنند:

• وقتی یک کاربر(کلاینت) متصل شد در کنسول یک پیغام نمایش میدهد.

• منتظر Event(رویداد) “chat 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');
});

ساخت کلاینت یا بخش سمت کاربر

فایل style.css رو در دایرکتوری client در پوشه css و فایل app.js را در دایرکتوری Client پوشه js بسازید.

همچنین فایل index.html را قبلاً در دایرکتوری Client ساخته ایم.

فایل index.html :

این صفحه‌ای هست که کاربر در مرورگر میبینه و میتونه چت کنهکنه.

باید socket.io-client و angular.js رو وارد اسکریپت HTML کنیم:

فایل socket.io رو از اینجا دانلود کنید و آدرس آن را در قسمت src قرار دهید. همچنین آدرس فایل angular.js را که قبلاً دانلود کردیم در قسمت src باید قرار دهیم.

<script src="/path/to/angular.js"></script>
<script src="/socket.io/socket.io.js"></script>

  فایل HTML در نهایت به این صورت خواهد بود:

<!doctype html>
<html ng-app="myApp">
  <head>
    <title>Socket.IO chat</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="/lib/angular/angular.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js">
    </script>
    <script src="/js/app.js"></script>
  </head>
  <body ng-controller="mainController">
    <ul id="messages"></ul>
    <div>
      <input id="m" ng-model="message" autocomplete="off" />
      <button ng-click="send()">Send</button>
    </div>
  </body>
</html>

محتویات فایل css/style.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 :

در این فایل ما برنامه سمت کلاینت رو با استفاده از فریم ورک انگولار مینویسیم.

معرفی توابع socket.on() و socket.emit():

• socket.on منتظر یک رویداد مشخص میماند و به محض اینکه آن رویداد اتفاق افتاد تابعی که ما مشخص کردیم رو اجرا میکند.

• Socket.emit یک پیام را با نام رویداد مشخصی ارسال میکند.

نحوه استفاده از دو تابع فوق به این صورت میباشد:

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 شوید (همانجایی که انجایی که server.js هست) و سرور رو با این دستور راه اندازی کنیدراه اندازی کنید:

node server.js

سرور برروی پورت ۳۰۰۰ راه اندازی میشه، مرورگر رو باز کنید و وارد این راه اندازی میشه، مرورگر رو باز کنید و وارد این url بشید:

http://localhost:3000

داخل یه تب دیگه هم، همین url رو باز کنید.

یک متن وارد کنید و برروی send بزنید. همونطور که مشاهده میکنید پیام در هر دو تب نمایش داده میشود(سرور پیام را به صورت آنی به تمام کلاینت های متصل به سوکت ارسال میکند).

منبع  :  ElectroPi.ir