jquery和workerman實例和案例demo代碼

下載workerman的linux包。並新建start.php文件,內容如下:

<?php

use Workerman\Worker;
require_once 'Autoloader.php';

$global_uid = 0;

// 當客戶端連上來時分配uid,並保存連接,並通知所有客戶端
function handle_connection($connection)
{
    global $text_worker, $global_uid;
    // 爲這個連接分配一個uid
    $connection->uid = ++$global_uid;
}

// 當客戶端發送消息過來時,轉發給所有人
function handle_message($connection, $data)
{
    global $text_worker;
    foreach($text_worker->connections as $conn)
    {
        $conn->send("user[{$connection->uid}] said: $data");
    }
}

// 當客戶端斷開時,廣播給所有客戶端
function handle_close($connection)
{
    global $text_worker;
    foreach($text_worker->connections as $conn)
    {
        $conn->send("user[{$connection->uid}] logout");
    }
}

// 創建一個文本協議的Worker監聽2347接口
$text_worker = new Worker("websocket://0.0.0.0:2347");

// 只啓動1個進程,這樣方便客戶端之間傳輸數據
$text_worker->count = 1;

$text_worker->onConnect = 'handle_connection';
$text_worker->onMessage = 'handle_message';
$text_worker->onClose = 'handle_close';

Worker::runAll();


執行命令,守護進程運行模式:

php start.php start -d


下面新建前端JS代碼界面:

<html>
<head>
    <meta charset="UTF-8">
    <title>Web sockets test</title>
    <script src="../jquery.min.js" type="text/javascript"></script>
   
</head>
<body>
   


<script> 
$(function() {     
    var socket; 
    var readyState = ["connecting", "connected", "closing", "closed"]; 
    /* 打開連接事件 */ 
    $("button:eq(0)").click(function() { 
        try { 
             /* 連接 */ 
             socket = new WebSocket("ws://192.168.1.114:2347"); 
                
             /* 綁定事件 */ 
             socket.onopen = function() { 
                 $("#msg").html("連接成功..."); 
             }; 
                
            socket.onmessage = function(e) { 
                 $("#msg").html($("#msg").html() + "<br />" + e.data); 
             }; 
                
             socket.onclose = function() { 
                 $("#msg").html($("#msg").html() + "<br />關閉連接..."); 
             }; 
        } catch(exception) { 
            $("#msg").html($("#msg").html() + "<br />有錯誤發生"+exception); 
        } 
    }); 
       
    /* 發送數據事件 */ 
    $("button:eq(1)").click(function() { 
        /* 檢查文本框是否爲空 */ 
        if($("#data").val() == "") { 
            alert("請輸入數據!"); 
            return; 
        } 
           
        try { 
            socket.send($("#data").val()); 
            $("#msg").html($("#msg").html() + "<br />發送數據:" + $("#data").val()); 
        } catch (exception) { 
            $("#msg").html($("#msg").html() + "<br />發送數據出錯"); 
        } 
           
        /* 清空文本框 */ 
        $("#data").val(""); 
    }); 
       
    /* 斷開連接 */ 
    $("button:eq(2)").click(function() { 
        socket.close(); 
    }); 
}); 
</script> 
</head> 
   
<body> 
<h1>WebSocket示例</h1> 
<input type="text" id="data" /> 
<button>打開連接</button> 
<button>發送數據</button> 
<button>關閉連接</button> 
<p id="msg"></p> 
</body> 
</html> 



打開2個瀏覽器chrome瀏覽和火狐瀏覽,分別點擊“打開鏈接”,輸入消息,‘發送數據’。這裏我們在2個瀏覽器上都能看到相互的聊天消息了。夠完整吧?




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章