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个浏览器上都能看到相互的聊天消息了。够完整吧?




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