1. 程式人生 > >jquery和workerman例項和案例demo程式碼

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個瀏覽器上都能看到相互的聊天訊息了。夠完整吧?