前端代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
內容:<input type="text" name="msg" id="msg" value="" />
<button onclick="sendMsg()">發送</button>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
//創建websocket 對象
var ws = new WebSocket("ws://127.0.0.1:8282");
//當連接准備好時，則觸發
ws.onopen = function(e) {
//綁定id
var fromid=getUrlParam('fromid');
var toid=getUrlParam('toid');
var message = '{"type":"bind","fromid":"'+fromid+'","toid":"'+toid+'"}';
ws.send(message);
};
//從服務器收到消息時，該監聽器將被調用
ws.onmessage = function(e){
var message = JSON.parse(e.data);
console.log(message);
if(message.type == "say"){
alert(message.msg);
}
}
//當連接關閉時，則觸發
ws.onclose = function(e) {
console.log(e);
};
//發送數據
function sendMsg(){
var fromid=getUrlParam('fromid');
var toid=getUrlParam('toid');
var msg=$("#msg").val();
var message = '{"type":"say","fromid":"'+fromid+'","toid":"'+toid+'","msg":"'+msg+'"}';
ws.send(message);
}
/**
* GET取值,用於接受？傳值 可接收漢字 推薦使用
*/
function getUrlParam(name){
// 用該屬性獲取頁面 URL 地址從問號 (?) 開始的 URL（查詢部分）
var url = window.location.search;
// 正則篩選地址欄
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
// 匹配目標參數
var result = url.substr(1).match(reg);
//返回參數值
return result ? decodeURIComponent(result[2]) : null;
}
</script>
</body>
</html>
后端代碼：
ps:修改后端代碼后請重啟服務端 wind上重啟cmd窗口
<?php /** * This file is part of workerman. * * Licensed under The MIT License * For full copyright and license information, please see the MIT-LICENSE.txt * Redistributions of files must retain the above copyright notice. * * @author walkor<walkor@workerman.net> * @copyright walkor<walkor@workerman.net> * @link http://www.workerman.net/ * @license http://www.opensource.org/licenses/mit-license.php MIT License */ /** * 用於檢測業務代碼死循環或者長時間阻塞等問題 * 如果發現業務卡死，可以將下面declare打開（去掉//注釋），並執行php start.php reload * 然后觀察一段時間workerman.log看是否有process_timeout異常 */ //declare(ticks=1); use \GatewayWorker\Lib\Gateway; /** * 主邏輯 * 主要是處理 onConnect onMessage onClose 三個方法 * onConnect 和 onClose 如果不需要可以不用實現並刪除 */ class Events { /** * 當客戶端連接時觸發 * 如果業務不需此回調可以刪除onConnect * * @param int $client_id 連接id */ public static function onConnect($client_id) { // 向當前client_id發送數據 //Gateway::sendToClient($client_id, "Hello $client_id\r\n"); // 向所有人發送 //Gateway::sendToAll("$client_id login\r\n"); } /** * 當客戶端發來消息時觸發 * @param int $client_id 連接id * @param mixed $message 具體消息 */ public static function onMessage($client_id, $message) { $req_data = json_decode($message, true); //綁定id if($req_data['type'] == 'bind'){ Gateway::bindUid($client_id, $req_data['fromid']); $msg='{"type":"say","fromid":"'.$req_data['fromid'].'","toid":"'.$req_data['fromid'].'","msg":"'+msg+'"}'; $message=[ 'type'=>'bind', 'fromid'=>$req_data['fromid'], 'toid'=>$req_data['toid'], 'msg'=>'綁定成功' ]; Gateway::sendToUid($req_data['fromid'], json_encode($message,JSON_UNESCAPED_UNICODE)); } //發送消息 if($req_data['type'] == 'say'){ $message=[ 'type'=>'say', 'fromid'=>$req_data['fromid'], 'toid'=>$req_data['toid'], 'msg'=>$req_data['msg'] ]; Gateway::sendToUid($req_data['toid'], json_encode($message,JSON_UNESCAPED_UNICODE)); } } /** * 當用戶斷開連接時觸發 * @param int $client_id 連接id */ public static function onClose($client_id) { // 向所有人發送 //GateWay::sendToAll("$client_id logout\r\n"); } }
效果：
