jquery和workerman例項和案例demo程式碼
阿新 • • 發佈:2019-01-04
下載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個瀏覽器上都能看到相互的聊天訊息了。夠完整吧?