درخواست های ارتباط
جستجو تنظیمات
لیست دوستان من
صندوق پیام
همه را دیدم تنظیمات
  • در حال دریافت لیست پیام ها
صندوق پیام
  • در حال دریافت لیست رویدادها
همه رویدادهای من

آموزش کامل وب سوکت - قسمت دوم

5 نظرات
با سلام خدمت همه ی دوستان عزیز
در قسمت اول آموزش وب سوکت با مفهایم پایه و نکات مثبت وب سوکت آشنا شدیم.
حال در این قسمت به نحوه ی ایجاد وب سوکت سرور در زبان php و نوب سوکت کلاینت در زبان javascript می پردازیم.

وب سوکت سرور در php


ابتدا در پوشه ی www سرور (easy php , wamp , xamp یا هر برنامه دیگه ای ) یک پوشه ای به نام websocket ایجاد می کنیم .
سپس کتابخانه های رو که برای شروع نیاز داریم رو اونجا کپی می کنیم (در انتها تمامی فایل های مورد نیاز برای دانلود قرار داده شده است.) و یک فایلی به نام server.php ایجاد می کنیم.
در فایل server.php کد های زیر رو قرار می دهیم :

<?php

include "PhpWebSocket.class.php";


$host="0.0.0.0";
$port=8000;
$Server = new PHPWebSocket();
$Server->bind('message', 'wsOnMessage');
$Server->bind('open', 'wsOnOpen');
$Server->bind('close', 'wsOnClose');
$Server->wsStartServer($host, $port);

function wsOnMessage($clientID, $message, $messageLength, $binary)
{
	global $Server;
	$ip = long2ip( $Server->wsClients[$clientID][6] );
	$Server->log( "$ip ($clientID) said : $message." );
}

function wsOnOpen($clientID)
{
	global $Server;
	$ip = long2ip( $Server->wsClients[$clientID][6] );
	$Server->log( "$ip ($clientID) has connected." );
}

function wsOnClose($clientID, $status) {

	global $Server;
	$ip = long2ip( $Server->wsClients[$clientID][6] );
	$Server->log( "$ip ($clientID) has disconnected." );

}


حال عملکرد کد بالا رو خط به خط بررسی می کنیم :
در خط سوم ما فقط کتابخانه PhpWebSocket.class.php رو به برنامه اضافه کردیم.
در خط 6 آی پی سیستم رو وارد می کنیم که وب سوکت سرور در اون آی پی اجرا بشه . برای اینکه هم آی پی داخلی و هم آی پی تحت شبکه و حتی آی پی اکسترنال رو هرسه همزمان روی اون ها سرور اجرا بشه ما 0.0.0.0 رو وارد می کنیم که هر آی پی که باشه روی اون ها سرور اجرا بشه مزیت دوم این 0.0.0.0 در این هست که اگر آی پی سیستم تغییر کرد سرور خودکار از آی پی جدید استفاده می کنه.
در خط 7 هم پورتی رو که سرور در اون اجرا میشه رو وارد کردیم برای مثال پورت 8000 که اکثرا خالی هست.
در خط 8 یک شی جدید از وب سوکت سرور ایجاد می کنیم و آن را در متغییر $server قرار می دهیم
همونطور که در قسمت اول آموزش گفته بودیم که وب سوکت چندین متد داره (open , close , message ) اینجا ما متد ها رو تعریف کردیم و هرسه اون ها رو آبجکت سرور معرفی می کنیم یعنی در خط 9 تعریف می کنیم که وقتی متد message اتفاق می افته تابع wsOnMessage رو فراخوانی بکن خطوط 10و11 هم به همین ترتیب و نهایتا ما در خط 12 متد wsStartServer رو با پارامتر های ورودی آی پی سیستم و پورت فراخوانی می کنیم. پس از اجرای این کد وب سوکت ما شروع به کار می کنه در خطوط 14،21 و 28 هم ما توابعی رو که برای متد های سرور معرفی کردیم رو تعریف می کنیم.

wsOnOpen
زمانی که کسی به وب سرور وصل میشه این تابع فراخوانی میشه و کد های موجود توی اون در سرور پیغام اتصال کاربر جدید به همراه آی پی رو نمایش میده.

wsOnMessage
زمانی که کاربر وصل شده به سرور ، پیغامی ارسال می کنه این تابع فراخوانی میشه و شماره کاربر clientid و متن پیغام رو به همراه آی پی کاربر چاپ می کنه

wsOnClose
زمانی که اتصال کاربر از سرور قطع میشه این تابع فراخوانی میشه و شماره کاربر رو که به عنوان پارامتر ورودی دریافت میکنه پس از چاپ ، از لیست کاربر های وصل شده حذف می کنه

کد بالا رو که در فایل server.php ذخیره کردیم با استفاده از محیط command window با دستور php -q server.php اجرا می کنیم.
برای اینکه در هربار اجرای سرور دستور بالا رو وارد نکین ، یک فایل server.bat بسازین و کد
php -q server.php
در اون قرار بدین بسپس با اجرای اون فایل سرور ما شروع به کار می کنه و شما در صورت اجرای درست تمامی مراحل باید تصویر زیر رو در محیط command window مشاهده کنید :

آموزش وب سوکت سرور در زبان php


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

وب سوکت کلاینت در javascript


در پوشه ای دلخواه یک فایل index.html ایجاد کنید و کد زیر رو در اون قرار بدین :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
    <head>
        <title>Farhad Mehryari | Websocket Client</title>
    </head>
    <body>
        <script>
                serverUrl = 'ws://127.0.0.1:8000/websocket/server.php';
                if (window.MozWebSocket) {
                    socket = new MozWebSocket(serverUrl);
                } else if (window.WebSocket) {
                    socket = new WebSocket(serverUrl);
                }

                  socket.binaryType = 'blob';
                  socket.onopen = function(msg) {
                     console.log("connected to socket");
                      return true;
                  };

                  socket.onmessage = function(msg) {
                      console.info(msg.data);
                      return true;
                  };
                  socket.onclose = function(msg) {
                    console.log("Bye Bye socket");
                      return true;
                  };

        </script>
    </body>
</html>


کد بالا رو بررسی می کنیم :
در متغییر ws آدرس سرور وب سوکت رو قرار میدیم در سطر بعدی بررسی می کنیم که مرور گر از وب سوکت پشتیبانی م ی کنه یا نه در قسمت اول آموزش گفتیم که مرور گر ها از چه نسخه ای به بعد از وب سوکت پشتیبانی می کنند.
بررسی می کنیم که MozWebSocket ( برای مرور گر موزیلا فایرفاکس ) موجود هست یا نه در غیر این صورت WebSocket رو بررسی می کنیم که اگر مقدار بازگشتی این شرط if هم false باشد یعنی مرور گر از وب سوکت پشتیبانی نمی کند. حال بعد از اتصال سه متد وب سوکت رو که در سرور هم بیان کردیم ، تعریف می کنیم.
حال فایل index.html رو ذخیره کرده و در مرور گر اجرا می کنیم :
آموزش وب سوکت Php , Javascript


در تصویر بالا من فایل کلاینت رو در مرور گر گوگل کروم اجرا کردم حال همان فایل رو در مرور گر فایرفاکس نیز اجرا می کنم :

آموزش وب سوکت Php Javascript


مشاهده می کنیم که در خروجی سرور پیغام اتصال جدید دوباره با شماره جدید ظاهر شد.
حال تغییری جزئی در فایل Index.html ایجاد می کنیم تا بتوانیم پیغامی به سرور ارسال کنیم :
محتویات فایل Index.html رو به کد زیر تغییر بدین :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
    <head>
        <title>Farhad Mehryari | Websocket Client</title>
    </head>
    <body>
      <input type="text" id="message"/>
      <input type="button" value="send !" onclick="sendmsg()" />
        <script>
                serverUrl = 'ws://127.0.0.1:8000/websocket/server.php';
                if (window.MozWebSocket) {
                    socket = new MozWebSocket(serverUrl);
                } else if (window.WebSocket) {
                    socket = new WebSocket(serverUrl);
                }

                  socket.binaryType = 'blob';
                  socket.onopen = function(msg) {
                     console.log("connected to socket");
                      return true;
                  };

                  socket.onmessage = function(msg) {
                      console.info(msg.data);
                      return true;
                  };
                  socket.onclose = function(msg) {
                    console.log("Bye Bye socket");
                      return true;
                  };

                  function sendmsg()
                  {
                    var msg=document.getElementById("message");
                    socket.send(msg.value);
                  }

        </script>
    </body>
</html>

حال سرور رو اجرا و فایل index.html رو در مرور گر اجرا می کنیم :

بعد از اجرای فایل در مرور گر و اتصال به سرور ، متن Hi Server رو در فیلد موجود وارد کردم سپس کلید send رو زدم و مجددا متن I'am Sending Your Message وارد کردم دوباره send زدم خروجی در تصویر زیر مشاهده می کنیم :
آموزش وب سوکت سرور و کلاینت


حالا برای ارسال پیغام از طرف سرور به کلاینت و درک بهتر ارتباط سریع تغییراتی در فایل server.php و index.html اعمال می کنیم :

فایل server.php

<?php

include "PhpWebSocket.class.php";

$host="0.0.0.0";
$port=8000;
$Server = new PHPWebSocket();
$Server->bind('message', 'wsOnMessage');
$Server->bind('open', 'wsOnOpen');
$Server->bind('close', 'wsOnClose');
$Server->wsStartServer($host, $port);

function wsOnMessage($clientID, $message, $messageLength, $binary)
{
	global $Server;
	$ip = long2ip( $Server->wsClients[$clientID][6] );
	$Server->log( "$ip ($clientID) said : $message." );
	
	$Server->wsSend($clientID , "From Server : ". $message);
	
}

function wsOnOpen($clientID)
{
	global $Server;
	$ip = long2ip( $Server->wsClients[$clientID][6] );
	$Server->log( "$ip ($clientID) has connected." );
}

function wsOnClose($clientID, $status) {

	global $Server;
	$ip = long2ip( $Server->wsClients[$clientID][6] );
	$Server->log( "$ip ($clientID) has disconnected." );

}


تنهای دستوری که اضافه کردیم کد زیر است که به تابع wsOnMessage اضافه شد :
	$Server->wsSend($clientID , "From Server : ". $message);

دستور بالا هنگام دریافت پیغام از کلاینت ، به اون پیغامی رو ارسال می کنه :

حال در فایل Index.html تغییرات زیر رو وارد می کنیم تا پیغامی های ارسالی از سرور رو مشاهده کنیم :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
    <head>
        <title>Farhad Mehryari | Websocket Client</title>
    </head>
    <body>
      <textarea id="log" style="height:200px;width:300px;"></textarea>
      <br>
      <input type="text" id="message"/>
      <input type="button" value="send !" onclick="sendmsg()" />
        <script>
                var log=document.getElementById("log");
                serverUrl = 'ws://127.0.0.1:8000/websocket/server.php';
                if (window.MozWebSocket) {
                    socket = new MozWebSocket(serverUrl);
                } else if (window.WebSocket) {
                    socket = new WebSocket(serverUrl);
                }

                  socket.binaryType = 'blob';
                  socket.onopen = function(msg) {
                     log.value="> connected to socket\r\n";
                      return true;
                  };

                  socket.onmessage = function(msg) {
                      log.value+="> "+msg.data+"\r\n";
                      return true;
                  };
                  socket.onclose = function(msg) {
                    console.log("Bye Bye socket");
                      return true;
                  };

                  function sendmsg()
                  {
                    var msg=document.getElementById("message");
                    log.value+="> Me : "+msg.value+"\r\n";
                    socket.send(msg.value);
                  }

        </script>
    </body>
</html>

پس از ایجاعمال تغییرات گفته شده مجدد سرور رو اجرا کنید
سپس فایل index.html رو در مرورگر اجرا کنید
خروجی حاصل از تغییرات اعمال شده :

آموزش وب سوکت سرور ، کلاینت


در قسمت بعدی نحوه ی ایجاد یک سیستم گفتگو مبتنی بر وب سوکت رو با استفاده از php و javascript (طبق مفاهیم و متد های بیان شده در این آموزش ) خواهیم پرداخت.

دانلود فایل های آموزشی
در پناه حق موفق باشید.

نویسنده : فرهاد مهریاری
منبع : انجمن تخصصی فناوری اطلاعات ایران
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد.
برچسب ها
ردیف عنوان قیمت
1 آموزش کامل وب سوکت - قسمت اول رایگان
2 آموزش کامل وب سوکت - قسمت دوم رایگان
3 آموزش کامل وب سوکت سیستم گفتگو (چت) رایگان
مطالب مرتبط
نظرات
  • ممنون بابت این پست، فقط یه مطلبی رو درباره وب سوکت در PHP عرض کنم که باعث شد من خیلی با مشکل برای اجرای وب سوکت روبرو بشم؛
    دوستانی که ار PHP استفاده میکنند حتما توجه کنند که ماژول php_sockets.dll حتما در فایل php.ini فعال و بارگذاری بشه در غیر اینصورت در موقع اجرای دستور در Command Prompt یا Terminal اجرا نمیشه و از اسکریپت خارج میشه.
  • سلام
    ممنون میشم کتابخانه PhpWebSocket.class.php رو در اختیارم قرار بدین!
  • با عرض پوزش
    لینک دانلود اصلاح شد
    (در انتهای آموزش )
  • با سلام من اون دستور command که می زنم برای ایجاد وب سوکت سرور این ارور رو می ده

    Setting environment for using XAMPP for Windows.
    pooya@DESKTOP-6UG6DIU e:\xampp
    1. php -q htdocs\websocket\server\server.php
    PHP Fatal error: Uncaught Error: Call to undefined function socket_create() in E:\xampp\htdocs\websocket\server\PhpWebSocket.class.php:103
    Stack trace:
    #0 E:\xampp\htdocs\websocket\server\server.php(20): PHPWebSocket->wsStartServer('127.0.0.1', 8800)
    #1 {main}
    thrown in E:\xampp\htdocs\websocket\server\PhpWebSocket.class.php on line 103

    Fatal error: Uncaught Error: Call to undefined function socket_create() in E:\xampp\htdocs\websocket\server\PhpWebSocket.class.php:103
    Stack trace:
    #0 E:\xampp\htdocs\websocket\server\server.php(20): PHPWebSocket->wsStartServer('127.0.0.1', 8800)
    #1 {main}
    thrown in E:\xampp\htdocs\websocket\server\PhpWebSocket.class.php on line 103
  • از نسخه ی php 7 استفاده نکنید
    با php version 5.6 کار کنید مشکلی پیش نمیاد

برای ارسال نظر ابتدا به سایت وارد شوید

arrow