前端代码:
<!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 GatewayWorkerLibGateway; /** * 主逻辑 * 主要是处理 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 "); // 向所有人发送 //Gateway::sendToAll("$client_id login "); } /** * 当客户端发来消息时触发 * @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 "); } }
效果: