آپدیت های Real Time در رویدادهای فرآیند فراخوانی (call progress) به ما فرصت خوبی رو برای کاغر کردن با websocket ها میده. در این مقاله میخواهیم درمورد اینکه چطور یک اپلیکیشن Express رو گسترش بدیم و قابلیت ارتباط Real time بین کلاینت و سرور رو اضافه کنیم. ما سرور Express رو به یک داشبورد برای نمایش آمار تماس ها بصورت Real Time و با استفاده از socket.io تبدیل می کنیم.
راه اندازی همه چیز
شما باید node.js و npm رو بصورت نصب شده داشته باشید. من از node 4٫0 و npm 2٫10٫1 برای این کار استفاده کردم, شما از آخرین نسخه ها استفاده کنید.
همچنین شما نیاز به ساخت یک اکانت Twilio و داشتن یک شماره موبایل با قابلیت صوتی دارید. شما میتونید از اکانت محدود trial استفاده کنید. اما برای داشتن امکانات بیشتر بهتره اکانتتون رو آپگرید کنید.
با وارد کردن دستورات زیر میتونید پروژه اولیه رو داشته باشید :
git clone https://github.com/sagnew/CallStatusDashboard.git
cd CallStatusDashboard/
git checkout backend-express-app
npm install
حالا باید socket.io رو نصب کنید :
npm install socket.io --save
شروع کار با socket.io
socket.io یک کتابخانه ی websocket برای افزودن ارتباط دوطرفه و مبتنی بر رویداد بین سرور شما و کلاینت هست. به شما اجازه میده رویدادها رو هروقت تغییر کرد درلحظه دریافت و emit کنید. این فوق العادست چون ما میتونیم با استفاده از emit کردن رویدادها به کلاینت هروقت که سرور آپدیتی از طریق وب هوک events/ دریافت کرد, همه چیز رو به روز داشته باشیم.
بیایید کار رو با ساخت یک مسیر جدید بنام views برای HTML و یک مسیر بنام static برای جاوا اسکریپت سمت کلاینت شروع کنیم :
mkdir views && mkdir static
فایل index.js رو باز کرده و تغییرات زیر رو برای اینکه به اپ اجازه بدیم محتوای ثابت serve کنه و از ارتباطات سوکت گزارش بگیره, اعمال کنید :
"use strict";
const express = require('express');
const bodyParser = require('body-parser');
const twilio = require('twilio');
const app = express();
// Run server to listen on port 3000.
const server = app.listen(3000, () => {
console.log('listening on *:3000');
});
const io = require('socket.io')(server);
app.use(bodyParser.urlencoded({ extended: false } ));
app.use(express.static('static'));
// Set socket.io listeners.
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
// Set Express routes.
app.get('/', (req, res) => {
res.sendFile(__dirname + '/views/index.html');
});
app.post('/events', (req, res) => {
let to = req.body.to;
let fromNumber = req.body.from;
let callStatus = req.body.CallStatus;
let callSid = req.body.callSid;
console.log(to, fromNumber, callStatus, callSid);
res.send('Event received');
});
app.post('/voice', (req, res) => {
// Generate a TwiML response
let twiml = new twilio.twiml.VoiceResponse();
// Talk in a robot voice over the phone.
twiml.say('Call progress events are rad');
// Set the response type as XML.
res.header('Content-Type', 'text/xml');
// Send the TwiML as the response.
res.send(twiml.toString());
});
حالا یک فایل جدید بنام client.js ساخته و در مسیر static قرار بدید و کد زیر رو بیافزایید :
var socket = io();
برای اتمام کار ما باید کد جاوا اسکریپت رو در HTML وارد کنیم. ما فایل client.js رو بهمراه لینک socket.io در هاست cdn اضافه می کنیم. یک فایل index.html ساخته و کد زیر رو بیافزایید :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<div id="phone-calls"></div>
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
<script src="client.js"></script>
</body>
</html>
حالا میتونیم با استفاده از اجرای سرور چک کنیم که همه چیز کار میکنه. و آدرس localhost:3000 رو وارد کنید و ببینید در کنسول چیزی log میشود :
node index.js
افزودن قابلیت Real time ارتباط بین سرور-کلاینت
بیایید مسیر call status رو برای انتشار یک رویداد هروقت که از Twilio آپدیتی دریافت کردیم با socket.io تغییر بدیم. ما میخواهیم یک آبجکت emit کنیم که شامل تمام اطلاعاتی باشه که از درخواست برای رویداد call status هست. فعلا ما از شماره تلفن تماس گیرنده و تماس گرفته شده, وضعیت تماس و SID تماس بعنوان کلید اصلی استفاده می کنیم.
به فایل index.js برگشته و کدهای زیر رو در مسیر events/ اضافه کنید :
"use strict";
const express = require('express');
const bodyParser = require('body-parser');
const twilio = require('twilio');
const app = express();
// Run server to listen on port 3000.
const server = app.listen(3000, () => {
console.log('listening on *:3000');
});
const io = require('socket.io')(server);
app.use(bodyParser.urlencoded({ extended: false } ));
app.use(express.static('static'));
// Set socket.io listeners.
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
// Set Express routes.
app.get('/', (req, res) => {
res.sendFile(__dirname + '/views/index.html');
});
app.post('/events', (req, res) => {
let to = req.body.to;
let fromNumber = req.body.from;
let callStatus = req.body.CallStatus;
let callSid = req.body.callSid;
io.emit('call progress event', { to, fromNumber, callStatus, callSid });
console.log(to, from, callStatus, callSid);
res.send('Event received');
});
app.post('/voice', (req, res) => {
// Generate a TwiML response
let twiml = new twilio.twiml.VoiceResponse();
// Talk in a robot voice over the phone.
twiml.say('Call progress events are rad');
// Set the response type as XML.
res.header('Content-Type', 'text/xml');
// Send the TwiML as the response.
res.send(twiml.toString());
});
ما باید یک تغییر قبل از اجرای نهایی انجام بدیم. اون هم در اسکریپت client.js هست :
var socket = io();
socket.on('call progress event', function(call){
// Create a list item to add to the page.
var li = document.createElement('li');
// Create an element for each piece of data in the phone call object.
var callSid = document.createElement('h4');
var to = document.createElement('h4');
var fromNumber = document.createElement('h4');
var callStatus = document.createElement('h4');
// Set the display text for each element.
callSid.textContent = 'Call SID: ' + call.callSid;
to.textContent = 'To: ' + call.to;
fromNumber.textContent = 'From: ' + call.fromNumber;
callStatus.textContent = 'Call Status: ' + call.callStatus;
// Append each line of text to our phone call list item.
li.appendChild(callSid);
li.appendChild(to);
li.appendChild(fromNumber);
li.appendChild(callStatus);
// Append the new object to the #phone-calls div.
document.getElementById('phone-calls').appendChild(li);
});
درنهایت خروجی رو مشاهده کنید و گزارش ها رو وقتی تماسی دریافت میشه ببینید :
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید