上节课(http://blog.csdn.net/github_26672553/article/details/54932788)我们已经完成了聊天功能的权限(用户名必须)认证。
这节课我们来完成,websocket客户端页面中『所有用户』显示出,连接到我们服务端的所有客户端用户。
1.在服务端验证用户登录后,就把保存的客户端信息,发生给客户端
$connection->send('users:'.json_encode($clients));
我们用users:
作为区分,表示是发送的数据是 所有用户的信息。
2.客户端收到消息,然后展示
if(/^users:/.test(getMsg)){ getMsg = getMsg.replace('users:',''); getMsg= eval('('+getMsg+')'); var listusers = document.getElementById('listusers'); listusers.innerHTML = ''; for(var key in getMsg){ var option = document.createElement('option'); option.value = key; option.innerHTML = getMsg[key]; listusers.appendChild(option); }}
websocket客户端在onmessage
回调函数中,判断接受的消息,是否是『所有用户』的数据,然后展示到页面。
我们这里只有『lily』这一位用户登录了。
至此,服务端server.php全部代码如下:
<?phpuse Workerman\Connection\AsyncTcpConnection;use Workerman\Worker;require 'workerman/Autoloader.php';$clients = []; $ws_worker = new Worker("websocket://10.211.55.13:9090");$ws_worker->count = 4;$ws_worker->onMessage = function($connection, $data){ global $clients; if(preg_match('/^login:(\w{3,20})/i',$data,$result)){ $ip = $connection->getRemoteIp(); if(!array_key_exists($ip,$clients)){ $clients[$ip] = $result[1]; $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'){ $connection->send('msg:nihao '.$clients[$connection->getRemoteIp()]); } } } $connection->onClose = function($connection) //客户端主动关闭 { global $clients; unset($clients[$connection->getRemoteIp()]); echo "connection closed\n"; };};Worker::runAll();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
客户端WebSocket_client.html全部代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>WebSocket_client</title> <script> var socket = 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+')'); var listusers = document.getElementById('listusers'); listusers.innerHTML = ''; for(var key in getMsg){ var option = document.createElement('option'); option.value = key; option.innerHTML = getMsg[key]; listusers.appendChild(option); } } }; socket.onclose = function(){ isLogin = false; } } function send(){ if (!isLogin){ alert('请先通过服务器验证'); } var msg = document.getElementById('txtmsg').value; socket.send('msg:' + msg); 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
广播怎么理解
$connection->send('users:'.json_encode($clients));
我们前面通过这个连接发送用户数据给客户端,这个connection
是当前和服务端连接的客户端,并没有对所有的客户端进行广播。
广播的原理,就在于对我们所有的connection
都遍历,去执行send()
。
所以,接下来改造我们服务端代码。
$clients[$ip] = $result[1]; //把新用户保存起来, 格式为 ip=>昵称
我们之前是这样保存客户端信息的,这样还不够,我们需要把connection
也保存起来。
$clients[$ip] = ['ip'=>$ip,'name'=>$result[1],'conn'=>$connection];
然后我们循环send
就实现了简单的广播消息
$users = 'users:'.json_encode(array_column($clients,'name','ip')); foreach($clients as $ip=>$client){ $client['conn']->send($users);}
改造之后的服务端代码server.php
<?phpuse Workerman\Connection\AsyncTcpConnection;use Workerman\Worker;require 'workerman/Autoloader.php';$clients = []; $ws_worker = new Worker("websocket://10.211.55.13:9090");$ws_worker->count = 4;$ws_worker->onMessage = function($connection, $data){ global $clients; if(preg_match('/^login:(\w{3,20})/i',$data,$result)){ $ip = $connection->getRemoteIp(); if(!array_key_exists($ip,$clients)){ $clients[$ip] = ['ip'=>$ip,'name'=>$result[1],'conn'=>$connection]; $connection->send('notice:success'); $connection->send('msg:welcome '.$result[1]); echo $ip .':' .$result[1] .'login' . PHP_EOL; $users = 'users:'.json_encode(array_column($clients,'name','ip')); foreach($clients as $ip=>$client){ $client['conn']->send($users); } } }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'){ $connection->send('msg:nihao '.$clients[$connection->getRemoteIp()]); } } } $connection->onClose = function($connection) //客户端主动关闭 { global $clients; unset($clients[$connection->getRemoteIp()]); echo "connection closed\n"; };};Worker::runAll();