websockt聊天

最新推荐文章于 2025-07-07 09:23:37 发布

小兮喔

最新推荐文章于 2025-07-07 09:23:37 发布

阅读量511

点赞数

CC 4.0 BY-SA版权

分类专栏： PHP

本文链接：https://blog.youkuaiyun.com/xiaosevenliang/article/details/77318517

PHP 专栏收录该内容

11 篇文章

订阅专栏

服务端

<?php
use workerman\Worker;
require dirname(__DIR__).'\Autoloader.php';
// 心跳间隔25秒
// define('HEARTBEAT_TIME', 25);

// 创建一个Worker监听9001端口，不使用任何应用层协议
$ws = new Worker("websocket://172.18.10.179:9001");

// 启动4个进程对外提供服务
$ws->count = 1;

// 用来保存uid到connection的映射(uid是用户id或者客户端唯一标识)
$worker->uidConnections = array();
$worker->usernames = array();

// 当客户端发来数据时
$ws->onMessage = function($connection, $data)
{
$getMsg = json_decode($data,true); //传递参数
//发送消息类型 login all toid
$type = isset($getMsg['type'])?$getMsg['type']:"";
$uid = isset($getMsg['username'])?$getMsg['username']:""; //formid
$message =isset($getMsg['message'])? $getMsg['message']:""; //msg
$connection->lastMessageTime = time(); //time
global $worker;

// 登录
if($type == "login")
{
if(!isset($connection->uid))
{
$connection->uid = $uid;
$worker->uidConnections[$uid] = $connection;
$worker->usernames[$uid] = $uid;
}
$result = array(
'msg' => "欢迎".$uid."进入聊天室！",
'data' => $worker->usernames
);
broadcast(json_encode($result));
} else if($type == "all") { // 广播
$result = array(
'msg' => $connection->uid."对大家说：".$message,
);
var_dump($result);
broadcast(json_encode($result));
} else { // 给特定uid发送
sendMessageByUid($connection->uid, $type, $message);
}

};

$ws->onClose = function($connection){
global $worker;
if(isset($connection->uid))
{
unset($worker->uidConnections[$connection->uid]);
unset($worker->usernames[$connection->uid]);
}
};

// 向所有验证的用户推送数据
function broadcast($message)
{
global $worker;
if(count($worker->uidConnections) != 0)
{
foreach($worker->uidConnections as $connection)
{
$connection->send($message);
}
}
}

// 针对uid推送数据
function sendMessageByUid($fromid, $tid, $message)
{
global $worker;
if(isset($worker->uidConnections[$tid]))
{
$selfconnection = $worker->uidConnections[$fromid];
$connection = $worker->uidConnections[$tid];
$result = array(
'msg' => $fromid."对".$tid."说：".$message,
);
$connection->send(json_encode($result));
$selfconnection->send(json_encode($result));
}
}

$worker->onClose = function($connection)
{
global $worker;
unset($worker->uidConnections[$connection->uid]);
};

// 运行worker
Worker::runAll();

客户端登录

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
<div style="margin-top:20%;margin-left:30%;">
<form action="client.php" method="post">
请输入用户名：<br>
<input type="text" name="username">
<input type="submit">
</form>
</div>
</body>
</html>

客户端聊天

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>client</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<style>
#main{width:800px;height:600px;margin:auto;padding:auto}
#left{width:600px;height:600px;float:left}
#txtcontent{width:600px;height: 400px;border: 1px solid gray;overflow: scroll;}
#right{
width:180px;height:600px;background:#EEEEEE;float:right;padding:9px;
}
#right li {
display: list-item;
text-align: -webkit-match-parent;
}
textarea{width: 600px;height: 100px}
</style>

<script>
var ws;
var username = "<?php echo $_POST['username'];?>";
var target = "ws://172.18.10.179:9001";
// 连接服务器
if('WebSocket' in window){
ws = new WebSocket(target);
}else if('MozWebSocket' in window){
ws = new MozWebSocket(target);
}else{
alert("No support");
}

// 创建连接
ws.onopen = function(){
var login_data = '{"type":"login","username":"'+username.replace(/"/g, '\\"')+'"}';
ws.send(login_data);
};

// 发送消息
function sendmsg(){
var msg = $("#txtmsg").val(); //消息内容
var toid = $("#listuers").val(); //到送到谁
var msg_data = '{"type":"'+toid+'","message":"'+msg.replace(/"/g, '\\"')+'"}';
$("#txtmsg").val("");
ws.send(msg_data);
}

// 接收消息
ws.onmessage=function(e){
var getMsg = eval('(' + e.data + ')');
if(undefined != getMsg.msg)
{
var msg = getMsg.msg;
$("#txtcontent").append("<p>"+msg+"</p>");
}
if(undefined != getMsg.data)
{
var data = getMsg.data;
var list = "";
var listuers = "<option value='all'>所有用户</option>";
for(var i in data){
list += "<li>"+data[i]+"</li>";
listuers += "<option value="+data[i]+">"+data[i]+"</option>";
};
$("#list").html("");$("#list").append(list);
$("#listuers").html("");$("#listuers").append(listuers);
}
};
// 关闭链接
ws.close=function(){};
</script>

<body>
<?php
if(!isset($_POST['username']))
{
header("Location:login.php");
}
?>
<div id="main">
<div id="left">
<div id="txtcontent">
</div><br>
所有用户:<select id="listuers"></select><br><br>
<textarea style="" id="txtmsg"></textarea> <br>
<button onclick="sendmsg()">发送消息</button>
</div>
<div id="right" >
<h4 style="size:4px;">在线用户</h4>
<ul id="list"></ul>
</div>
</div>
</body>

</html>