https://blog.csdn.net/github_26672553/article/details/54932788
https://blog.csdn.net/github_26672553/article/details/54946302
server.php
<?php
//本机IP是10.211.55.13
//需要监听的端口是 9090
use Workerman\Connection\AsyncTcpConnection;
use Workerman\Worker;
require 'workerman/Autoloader.php';
$clients = []; //保存客户端信息
// 创建一个Worker监听9090端口，使用websocket协议通讯
$ws_worker = new Worker("websocket://10.211.55.13:9090");
// 启动4个进程对外提供服务
$ws_worker->count = 4;
// 当收到客户端发来的数据后
$ws_worker->onMessage = function($connection, $data)
{
//这里用global的原因是:php是有作用域的,我们是在onMessage这个回调还是里操作外面的数组
//想要改变作用域外面的数组,就global一下
global $clients;
//验证客户端用户名在3-20个字符
if(preg_match('/^login:(\w{3,20})/i',$data,$result)){ //代表是客户端认证
$ip = $connection->getRemoteIp();
if(!array_key_exists($ip,$clients)){ //必须是之前没有注册过
$clients[$ip] = $result[1]; //把新用户保存起来, 格式为 ip=>昵称
// 向客户端发送数据
$connection->send('notice:success'); //验证成功消息
$connection->send('msg:welcome '.$result[1]); //普通消息
echo $ip .':' .$result[1] .'login' . PHP_EOL; //这是为了演示,控制台打印信息
//一旦有用户登录就把保存的客户端信息发送过去
$connection->send('users:'.json_encode($clients));
}
}elseif(preg_match('/^msg:(.*?)/isU',$data,$msgset)){ //代表是客户端发送的普通消息
if(array_key_exists($connection->getRemoteIp(),$clients)){ //必须是之前验证通过的客户端
echo 'get msg:' . $msgset[1] .PHP_EOL; //这是为了演示,控制台打印信息
if($msgset[1] == 'nihao'){
//如果收到'nihao',就给客户端发送'nihao 用户名'
//给客户端发送普通消息
$connection->send('msg:nihao '.$clients[$connection->getRemoteIp()]);
}
}
}
// 设置连接的onClose回调
$connection->onClose = function($connection) //客户端主动关闭
{
global $clients;
unset($clients[$connection->getRemoteIp()]);
echo "connection closed\n";
};
};
// 运行worker
Worker::runAll();
client.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket_client</title>
<script>
//创建一个socket实例
var socket = null; //初始为null
var isLogin = false; //是否登录到服务器上
//定义一个连服务的函数
function connectServer(){
var username = document.getElementById('username').value;
if (username == ''){
alert('用户昵称必填');
}
socket = new WebSocket("ws://10.211.55.13:9090");
socket.onopen = function() {
socket.send('login:' + username);
};
socket.onmessage = function(e) {
var getMsg = e.data;
if(/^notice:success$/.test(getMsg)){ //服务器验证通过
isLogin = true;
}else if(/^msg:/.test(getMsg)){ //代表是普通消息
var p = document.createElement('p');
p.innerHTML = '<span>收到消息:</span>' + getMsg.replace('msg:','');
document.getElementById('txtcontent').appendChild(p);
}else if(/^users:/.test(getMsg)){ //显示当前已登录用户
getMsg = getMsg.replace('users:','');
getMsg= eval('('+getMsg+')'); //转json
var listusers = document.getElementById('listusers');
listusers.innerHTML = '';//清空
for(var key in getMsg){
var option = document.createElement('option');
option.value = key; //ip
option.innerHTML = getMsg[key]; //昵称
listusers.appendChild(option); //添加元素进去
}
}
};
socket.onclose = function(){
isLogin = false;
}
}
//发送消息
function send(){
if (!isLogin){
alert('请先通过服务器验证');
}
var msg = document.getElementById('txtmsg').value;
//console.log(msg);
socket.send('msg:' + msg); //发送消息到服务端
//显示我们的消息到div中
var p = document.createElement('p');
p.innerHTML = '<span>回复消息:</span>' + msg;
document.getElementById('txtcontent').appendChild(p);
}
</script>
</head>
<body>
<div id="txtcontent" style="width: 500px;height: 250px;border: 1px solid gray"></div>
<div>所有用户:<select id="listusers"></select></div>
<div>你的昵称:<input type="text" id="username" /></div>
<div>
回复内容:
<textarea style="width: 500px;height: 100px" id="txtmsg"></textarea>
</div>
<div>
<button onclick="connectServer()">连接服务器</button>
<button onclick="send()">发送消息</button>
</div>
</body>
</html>
