首先去官网下载GatewayWorker：https://www.workerman.net/download
一、文件结构
① index.php是我创建的主要用于本次项目的讲解，后缀也可以用html。
② start_for_win.bat是window启动socket服务器的文件，双击启动。linux系统运行start.php就行。
二、找到start_gateway.php文件，将协议改成Websocket
$gateway = new Gateway("Websocket://0.0.0.0:8282");
三、在index.php文件连接Websocket
先启动start_for_win.bat
<script>
var ws = new WebSocket('ws://127.0.0.1:8282');
ws.onmessage = function (e) {
console.log(e);
}
</script>
四、Events.php发起初始化
//当客户端连接时触发
public static function onConnect($client_id)
{
Gateway::sendToClient($client_id, json_encode([
'type' => 'init',
'client_id' => $client_id
]));
}
五、index.php接收初始化，发起绑定用户
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<input id="fromId" type="hidden" value="<?php echo $_GET['fromId']?>">
<input id="toId" type="hidden" value="<?php echo $_GET['toId']?>">
<input type="text" id="text">
<button id="send">发送</button>
<div id="div"></div>
</body>
</html>
<script>
var fromId = $('#fromId').val();
var toId = $('#toId').val();
var ws = new WebSocket('ws://127.0.0.1:8282');
ws.onmessage = function (e) {
var message = eval("("+ e.data +")");
switch (message.type) {
case "init":
var bindObj = {
type:"bind",
fromId:fromId
}
var bindMsg = JSON.stringify(bindObj);
ws.send(bindMsg);
return;
}
}
</script>
注意：用了eval函数要将Events.php里的发送数据改成json数据。
六、Events.php接收绑定请求，绑定用户
//当客户端发来消息时触发
public static function onMessage($client_id, $message)
{
$list = json_decode($message,true);
if (!$list) return;
switch ($list['type']) {
case 'bind':
$fromId = $list['fromId'];
Gateway::bindUid($client_id,$fromId);
return;
}
七、index.php发送消息
$('#send').click(function () {
var value = $('#text').val();
var obj = {
type:"say",
data:value,
fromId:fromId,
toId:toId
}
var data = JSON.stringify(obj);
ws.send(data);
var html = '<div style="width: 100px;height: 50px;background-color: pink;">'+ value +'</div>';
$("#div").append(html);
$('#text').val('');
});
八、Events.php接收信息
//当客户端发来消息时触发
public static function onMessage($client_id, $message)
{
$list = json_decode($message,true);
if (!$list) return;
switch ($list['type']) {
case 'bind':
$fromId = $list['fromId'];
Gateway::bindUid($client_id,$fromId);
return;
case 'say':
$content = $list['data'];
$fromId = $list['fromId'];
$toId = $list['toId'];
$data = [
'type' => 'text',
'id' => $client_id,
'data' => $content,
'fromId' => $fromId,
'toId' => $toId
];
Gateway::sendToUid($toId,json_encode($data));
return;
}
}
九、index.php处理
ws.onmessage = function (e) {
console.log(e);
var message = eval("("+ e.data +")");
switch (message.type) {
case "init":
var bindObj = {
type:"bind",
fromId:fromId
}
var bindMsg = JSON.stringify(bindObj);
ws.send(bindMsg);
return;
case 'text':
var html = '<div style="width: 100px;height: 50px;background-color: pink;">'+ message.data +'</div>';
$("#div").append(html);
return;
}
}
补充：每一次修改Events.php文件都要重启socket服务
打开浏览器两个窗口，分别传index.php?fromId=1&toId=2和index.php?fromId=2&toId=1就可以实现聊天了
转载：https://blog.csdn.net/fzx_javascript/article/details/104575178
查看评论