۱۹
اسفند

جلسه ۰۴ : بررسی مدیریت رویدادها در Socket.IO

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

سلام و وقت بخیر، آموزش Socket.IO را از وب سایت پی وی لرن دنبال خواهیم نمود. بررسی مدیریت رویدادها در Socket.IO را در این بخش از آموزش دنبال خواهیم نمود.

بررسی مدیریت رویدادها در Socket.IO

سوکت ها بر اساس رویدادها کار می کنند. برخی از رویدادها به صورت رزرو شده وجود دارد که با استفاده از شی سوکت در سمت سرور قابل دسترسی است.

این ها:

Connect
Message
Disconnect
Reconnect
Ping
Join
Leave

شیء سوکت سمت مشتری همچنین برخی از رویدادهای رزرو شده را برای ما فراهم می کند:

Connect
Connect_error
Connect_timeout
Reconnect و غیره

در مثال Hello World ، ما از رویدادهای connection و disconnection استفاده کردیم تا هنگام اتصال و لفت کاربر ، log شوید. اکنون برای انتقال پیام از سرور به مشتری ، از رویداد message استفاده خواهیم کرد. برای این کار ، فراخوانی ((io.on (‘connection’, function(socket را مدیریت کنید تا موارد زیر را شامل شود.

مثال :

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('A user connected');

   //Send a message after a timeout of 4seconds
   setTimeout(function() {
      socket.send('Sent a message 4seconds after connection!');
   }, 4000);

   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});

http.listen(3000, function() {
   console.log('listening on *:3000');
});

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('A user connected');

//Send a message after a timeout of 4seconds

setTimeout(function() {

socket.send('Sent a message 4seconds after connection!');

}, 4000);

socket.on('disconnect', function () {

console.log('A user disconnected');

});

http.listen(3000, function() {

console.log('listening on *:3000');

});

با این کار ، چهار ثانیه پس از اتصال مشتری ، رویدادی به نام (داخلی-message(built in برای client ارسال می شود. تابع ارسال روی شی سوکت رویداد “message” را مرتبط می کند.

حال ، ما باید این رویداد را در سمت client خود مدیریت کنیم. بنابراین ، تگ اسکریپت index.html خود را ویرایش کنید تا کد زیر را درج کنید.

مثال :

<script>
   var socket = io();
   socket.on('message', function(data){document.write(data)});
</script>

var socket = io();

socket.on('message', function(data){document.write(data)});

</script>

اکنون ما در حال رسیدگی به رویداد “message” برای مشتری هستیم. هنگامی که به صفحه در مرورگر خود می روید ، تصویر زیر به شما نشان داده می شود.

بررسی مدیریت رویدادها در Socket.IO

بعد از گذشت ۴ ثانیه و سرور رویداد message را ارسال می کند ، کلاینت ما آن را مدیریت می کند و خروجی زیر را تولید می کند.

بررسی مدیریت رویدادها در Socket.IO

توجه – رشته ای از تکست را در این جا ارسال کردیم. همچنین می توانیم در هر رویدادی یک شی را ارسال کنیم.

Message یک رویداد داخلی است که توسط API ارائه شده است ، اما در یک برنامه واقعی کاربرد چندانی ندارد ، زیرا ما باید بتوانیم بین رویدادها تفاوت قائل شویم.

برای اجازه دادن به این امر ، Socket.IO توانایی ایجاد رویدادهای سفارشی را در اختیار ما قرار می دهد. می توانید با استفاده از عملکرد socket.emit رویدادهای سفارشی را ایجاد کنید.

به عنوان مثال ، کد زیر رویدادی به نام testerEvent را منتشر می کند.

مثال :

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('A user connected');

   //Send a message when 
   setTimeout(function() {
      //Sending an object when emmiting an event
      socket.emit('testerEvent', { description: 'A custom event named testerEvent!'});
   }, 4000);

   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});

http.listen(3000, function() {
   console.log('listening on localhost:3000');
});

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('A user connected');

//Send a message when

setTimeout(function() {

//Sending an object when emmiting an event

socket.emit('testerEvent', { description: 'A custom event named testerEvent!'});

}, 4000);

socket.on('disconnect', function () {

console.log('A user disconnected');

});

http.listen(3000, function() {

console.log('listening on localhost:3000');

});

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

مثال :

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <script src = "/socket.io/socket.io.js"></script>
   
   <script>
      var socket = io();
      socket.on('testerEvent', function(data){document.write(data.description)});
   </script>
   <body>Hello world</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hello world</title>

</head>

var socket = io();

socket.on('testerEvent', function(data){document.write(data.description)});

</script>

<body>Hello world</body>

</html>

این کار به روش مشابه مثال قبلی خواهد بود ، در حالی که رویداد در این مورد testerEvent بوده است. شما مرورگر خود را باز می کنید و به localhost: 3000 می روید.

مثال :

Hello world

1	Hello world

بعد از چهار ثانیه این رویداد فایر خواهد شد و مرورگر متنی را به شکل زیر تغییر می دهد.

مثال :

A custom event named testerEvent!

1	A custom event named testerEvent!

همچنین می توانیم از کلاینت رویدادها را منتشر کنیم. برای انتشار رویدادی از کلاینت خود ، از تابع emit در شی سوکت استفاده کنید.

مثال :

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <script src = "/socket.io/socket.io.js"></script>
   
   <script>
      var socket = io();
      socket.emit('clientEvent', 'Sent an event from the client!');
   </script>
   <body>Hello world</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hello world</title>

</head>

var socket = io();

socket.emit('clientEvent', 'Sent an event from the client!');

</script>

<body>Hello world</body>

</html>

برای مدیریت این رویدادها ، از تابع on روی سوکت در سرور خود استفاده کنید.

مثال :

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) {
   socket.on('clientEvent', function(data) {
      console.log(data);
   });
});

http.listen(3000, function() {
   console.log('listening on localhost:3000');
});

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) {

socket.on('clientEvent', function(data) {

console.log(data);

});

http.listen(3000, function() {

console.log('listening on localhost:3000');

});

بنابراین ، اکنون اگر به localhost: 3000 برویم ، یک رویداد سفارشی به نام clientEvent دریافت کرده استخراج خواهد شد. این رویداد با لاگینگ بر روی سرور انجام می شود.

مثال :

Sent an event from the client!

1	Sent an event from the client!

کلام پایانی

در این بخش از آموزش Socket.IO ، مدیریت رویدادها در Socket.IO را مورد بررسی قرار دادیم. در بخش بعدی Broadcasting را خواهیم داشت.

QR: جلسه ۰۴ : بررسی مدیریت رویدادها در Socket.IO

به اشتراک بگذارید

آموزش Socket.IO ,رویداد message - آموزش Socket.IO ,رویدادها در Socket.IO ,رویدادهای رزرو شده در Socket.IO ,سوکت ها بر اساس رویدادها

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۴ : بررسی مدیریت رویدادها در Socket.IO

بررسی مدیریت رویدادها در Socket.IO

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ