۱۹
اسفند

جلسه ۰۳ : Hello World

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

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

آموزش Socket.IO

سلام و وقت بخیر، آموزش Socket.IO را از وب سایت پی وی لرن دنبال خواهیم نمود. در ادامه، برای چاپ Hello World و کار با Socket.IO ، نیاز به ایجاد فایل index.html داریم که به بررسی آن می پردازیم.

برای تنظیم یک برنامه اکسپرس ، فایلی به نام app.js ایجاد کرده و کد زیر را وارد کنید.

مثال :

var app = require('express')();
var http = require('http').Server(app);

app.get('/', function(req, res) {
   res.sendfile('index.html');
});

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

var app = require('express')();

var http = require('http').Server(app);

app.get('/', function(req, res) {

res.sendfile('index.html');

});

http.listen(3000, function() {

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

});

برای سرویس دهی به یک فایل index.html احتیاج داریم ، یک فایل جدید با نام index.html ایجاد کرده و کد زیر را در آن وارد کنید.

مثال :

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <body>Hello world</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hello world</title>

</head>

<body>Hello world</body>

</html>

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

مثال :

nodemon app.js

1	nodemon app.js

این سرور را در localhost:3000 اجرا می کند. به مرورگر بروید و localhost:3000 را وارد کنید تا آن را بررسی کنید.

این کار برنامه اکسپرس ما را تنظیم می کند و اکنون در حال استفاده از یک فایل HTML در مسیر root است. اکنون به Socket.IO احتیاج خواهیم داشت و “A user connected” را وارد خواهیم کرد ، هر بار که کاربر به این صفحه می رود و “A user disconnected” ، هربار شخصی که این صفحه را مرور می کند / بسته می شود.

مثال :

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

//Whenever someone connects this gets executed
io.on('connection', function(socket) {
   console.log('A user connected');

   //Whenever someone disconnects this piece of code executed
   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');

});

//Whenever someone connects this gets executed

io.on('connection', function(socket) {

console.log('A user connected');

//Whenever someone disconnects this piece of code executed

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

console.log('A user disconnected');

});

http.listen(3000, function() {

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

});

(require(‘socket.io’)(http یک نمونه جدید socket.io متصل به سرور http ایجاد می کند. (io.on event handler) هندلر رویداد io.on مدیریت می کند connection, disconnection و غیره را.

ما سرور خود را تنظیم کرده ایم تا پیام ها را در connections و disconnections ثبت کند. اکنون باید اسکریپت client را وارد کنیم و شیء سوکت را در آن ابتدا تنظیم کنیم تا client در صورت لزوم بتواند connections برقرار کند. اسکریپت توسط سرور io در ‘socket.io/socket.io.js/’ ارائه می شود.

پس از انجام مراحل فوق ، فایل index.html به شرح زیر خواهد بود.

مثال :

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <script src = "/socket.io/socket.io.js"></script>
   
   <script>
      var socket = io();
   </script>
   <body>Hello world</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hello world</title>

</head>

var socket = io();

</script>

<body>Hello world</body>

</html>

اگر اکنون به localhost: 3000 بروید (مطمئن شوید سرور شما در حال اجرا است) ، به Hello World می پردازید که در مرورگر شما چاپ می شود. اکنون لاگ مربوط به کنسول سرور خود را بررسی کنید ، پیام زیر را نشان می دهد.

مثال :

A user connected

1	A user connected

اگر مرورگر خود را رفرش کنید ، اتصال سوکت disconnect شده و مجدداً ایجاد می شود. موارد زیر را می توانید در لاگ مربوط به کنسول خود مشاهده کنید.

مثال :

A user connected
A user disconnected
A user connected

A user connected

A user disconnected

A user connected

اکنون با socket connection کار می کنیم. به این ترتیب تنظیم اتصالات در Socket.IO بسیار آسان است.

کلام پایانی

در ادامه ی آموزش Socket.IO به مبحث چاپ Hello World و کار با Socket.IO پرداختیم. در جلسه ی آینده به مدیریت رویدادها خواهیم پرداخت. با ما همراه باشید.

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

آموزش Socket.IO ,ایجاد فاصله داخلی عناصر html در css ,ایجاد فایل app.js ,تنظیم اتصالات در Socket.IO ,فایل index.html

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

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

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

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

جلسه ۰۳ : Hello World

آموزش Socket.IO

کلام پایانی

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ