JavaScript websocket 實例

實例:

即時通訊聊天室demo
可以打開兩個頁面互相發送消息查看。

 

websocket.js

    /*  判斷瀏覽器是否內置了websocket */
    if ('WebSocket' in window) {
        websocket = new WebSocket('ws://180.76.144.202:19910/websocket');
    }


    websocket->onerror = 'onerror';
    websocket->onopen = 'onopen';
    websocket->onmessage = 'onmessage';
    websocket->onclose = 'onclose';
    websocket->onbeforeunload = 'onbeforeunload';
    websocket->closeWebSocket = 'closeWebSocket';
    weboskcet->send = 'send';


    /* 連接失敗時觸發 */
    function onerror () {
        setMessageInnerHTML('websocket connection error');
    }


    /* 連接成功時觸發 */
    function onopen () {
        setMessageInnerHTML('websocket connect success');
    }


    /* 收到新消息時觸發 */
    function onmessage (event) {
        setMessageInnerHTML(event);
    }


    /* 連接關閉時觸發 */
    function onclose () {
        setMessageInnerHTML('websocket connectionn closed');
    }


    /* 當窗口關閉時，主動關閉websocket連接。防止連接還沒斷開就關閉窗口,server端異常 */
    function onbeforeunload () {
        closeWebSocket();
    }


    /* 關閉websocket連接 */
    function closeWebSocket () {
        websocket.close();
    }


    /* 發送消息 */
    function send () {
        var message = document.getElementById('container').value;
        websocket.send(message);
    }

　instance.php:

<?php


require_once "../../MeepoPS/index.php";

$telnet = new \MeepoPS\Api\Websocket("0.0.0.0", 19910);


$telnet->instanceName = "MeepoPS-Websocket";

$telnet->callbackStartInstance = "callbackStartInstance";
$telnet->callbackConnect = "callbackConnect";
$telnet->callbackNewData = "callbackNewData";
$telnet->callbackSendBackBufferEmpty = "callbackSendBackBufferEmpty";
$telnet->callbackInstanceStop = "callbackInstanceStop";
$telnet->callbackConnectClose = "callbackConnectClose";


function callbackStartInstance ($instance)
{
    echo "實例" . $instance->instanceName . "啟動" . "\n";
}


function callbackConnect ($connect)
{
    foreach ($connect->instance->clientList as $client) {
        if ($connect->id != $client->id) {
            $client->send("新用戶" . $connect->id . "已經上線");
        }
    }

    var_dump("收到新鏈接. UniqueId = " . $connect->id . "\n");
}


function callbackNewData ($connect, $data)
{
 //   $connect->send("用戶 " . $connect->id . "說:" . $data . "\n");
     var_dump("UnqiueId = " . $connect->id . "說:" . $data ."\n");

    foreach ($connect->instance->clientList as $client) {
        if ($connect->id != $client->id) {
            $client->send("群發:用戶" . $connect->id . "說: " . $data . "\n");
        }
    }

}


function callbackSendBufferEmpty ($connect)
{
    var_dump("用戶 " . $connect->id . "的發送的消息隊列為空\n");
}


function callbackInstanceStop ($instance)
{
    foreach ($instance->clientList as $client) {
        $client->send("Service stop!");
    }
}



\MeepoPS\runMeepoPS();

　　

 

服務可以用MeepoPS/SWOOLE搭建：

　下面是MeepoPS實例

// 下載MeepoPS
git clone https://github.com/lixuancn/MeepoPS.git

// 進入目錄
cd MeepoPS/Example/Chat_Robot

// 普通模式啟動：
sudo php instance.php start 
// 守護進程模式啟動：
sudo php instance.php start -d

守護進程啟動下：
ps -aux | grep php 
能看到instance.php 說明啟動成功了。



注意瀏覽器訪問的端口和instance.php 端口一致。
例如 centos 7 防護牆查看端口19911 是否開啟：


// 查看防火牆狀態：
systemctl status firewalld.service

// 開啟端口19911
firewalld-cmd --permanent --zone=public --add-port=19911/tcp

// 重啟防火牆查看端口：

systemctl restart firewalld.service
firewall-cmd --query-port=19910/tcp

如果出現yes即為開啟成功。



打開瀏覽器訪問websocket.js，控制台查看log.