一个websocket的demo(php server)

一刀杀白 發表於 2019-5-27 13:52:00

notice:
通过命令行执行php文件  如 php -q c:\path\server.php  通过本地web服务器访问 http://127.0.0.1/websocket/index.php即可 notice:  需要php5.3或以上的执行环境,和一个web服务器如apache 浏览器需支持html5 web socket 这里监听 socket端口 9505,如遇到端口被占用可能需要在这两个文件内修改端口或者杀死相应端口进程 页面手机上看起来比pc上好看!
1.客户端代码 html文件
<div class="cnblogs_code"><img id="code_img_closed_0620299d-f51a-4991-a7e0-6e763a4e8b9c" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_0620299d-f51a-4991-a7e0-6e763a4e8b9c" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_0620299d-f51a-4991-a7e0-6e763a4e8b9c" class="cnblogs_code_hide">
<pre>1.client code:
<!DOCTYPE html>
<html>
<head>
 <title>chatdemo</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
 <link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
 <style type="text/css">
 
 </style>
</head>
<body>
 <div class="container">
 <div class="title">简易聊天demo</div>
 <div class="content">
 <div class="show-area"></div>
 <div class="write-area">
 <div><button class="btn btn-default send" >发送</button></div>
 <div><input name="name" id="name" type="text" placeholder="input your name"></div>
 <div>
 <textarea name="message" id="message" cols="38" rows="4" placeholder="input your message..."></textarea>
 </div>
 </div>
 </div>
 </div>

 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
 <script>
 $(function(){
 var wsurl = 'ws://127.0.0.1:9505/websocket/server.php';
 var websocket;
 var i = 0;
 if(window.WebSocket){
 websocket = new WebSocket(wsurl);

 //连接建立
 websocket.onopen = function(evevt){
 console.log("Connected to WebSocket server.");
 $('.show-area').append('Connected to WebSocket server!');
 }
 //收到消息
 websocket.onmessage = function(event) {
 var msg = JSON.parse(event.data); //解析收到的json消息数据

 var type = msg.type; // 消息类型
 var umsg = msg.message; //消息文本
 var uname = msg.name; //发送人
 i++;
 if(type == 'usermsg'){
 $('.show-area').append('<a name="'+i+'"></a>'+uname+' say: '+umsg+'');
 }
 if(type == 'system'){
 $('.show-area').append('<a name="'+i+'"></a>'+umsg+'');
 }

 $('#message').val('');
 window.location.hash = '#'+i;
 }

 //发生错误
 websocket.onerror = function(event){
 i++;
 console.log("Connected to WebSocket server error");
 $('.show-area').append('<a name="'+i+'"></a>Connect to WebSocket server error.');
 window.location.hash = '#'+i;
 }

 //连接关闭
 websocket.onclose = function(event){
 i++;
 console.log('websocket Connection Closed. ');
 $('.show-area').append('<a name="'+i+'"></a>websocket Connection Closed.');
 window.location.hash = '#'+i;
 }

 function send(){
 var name = $('#name').val();
 var message = $('#message').val();
 if(!name){
 alert('请输入用户名!');
 return false;
 }
 if(!message){
 alert('发送消息不能为空!');
 return false;
 }
 var msg = {
 message: message,
 name: name
 };
 try{
 websocket.send(JSON.stringify(msg));
 } catch(ex) {
 console.log(ex);
 }
 }

 //按下enter键发送消息
 $(window).keydown(function(event){
 if(event.keyCode == 13){
 console.log('user enter');
 send();
 }
 });

 //点发送按钮发送消息
 $('.send').bind('click',function(){
 send();
 });

 }
 else{
 alert('该浏览器不支持web socket');
 }

 });
 </script>
</body>
</html></pre>
</div>
View Code</div>
2.socket服务器端代码 php文件
<div class="cnblogs_code"><img id="code_img_closed_418997af-770c-475e-b1cf-e397c760ec8c" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_418997af-770c-475e-b1cf-e397c760ec8c" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_418997af-770c-475e-b1cf-e397c760ec8c" class="cnblogs_code_hide">
<pre>2.php code:
<?php
$host = '127.0.0.1';
$port = '9505';
$null = NULL;

//创建tcp socket
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);
socket_bind($socket, 0, $port);

//监听端口
socket_listen($socket);

//连接的client socket 列表
$clients = array($socket);

//设置一个死循环,用来监听连接 ,状态
while (true) {

$changed = $clients;
socket_select($changed, $null, $null, 0, 10);

//如果有新的连接
if (in_array($socket, $changed)) {
 //接受并加入新的socket连接
 $socket_new = socket_accept($socket);
 $clients[] = $socket_new;

 //通过socket获取数据执行handshake
 $header = socket_read($socket_new, 1024);
 perform_handshaking($header, $socket_new, $host, $port);

 //获取client ip 编码json数据,并发送通知
 socket_getpeername($socket_new, $ip);
 $response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' connected')));
 send_message($response);
 $found_socket = array_search($socket, $changed);
 unset($changed[$found_socket]);
}

//轮询每个client socket 连接
foreach ($changed as $changed_socket) {

 //如果有client数据发送过来
 while(socket_recv($changed_socket, $buf, 1024, 0) >= 1)
 {
 //解码发送过来的数据
 $received_text = unmask($buf);
 $tst_msg = json_decode($received_text);
 $user_name = $tst_msg->name;
 $user_message = $tst_msg->message;

 //把消息发送回所有连接的 client 上去
 $response_text = mask(json_encode(array('type'=>'usermsg', 'name'=>$user_name, 'message'=>$user_message)));
 send_message($response_text);
 break 2;
 }

 //检查offline的client
 $buf = @socket_read($changed_socket, 1024, PHP_NORMAL_READ);
 if ($buf === false) {
 $found_socket = array_search($changed_socket, $clients);
 socket_getpeername($changed_socket, $ip);
 unset($clients[$found_socket]);
 $response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' disconnected')));
 send_message($response);
 }
}
}
// 关闭监听的socket
socket_close($sock);

//发送消息的方法
function send_message($msg)
{
global $clients;
foreach($clients as $changed_socket)
{
 @socket_write($changed_socket,$msg,strlen($msg));
}
return true;
}

//解码数据
function unmask($text) {
$length = ord($text) & 127;
if($length == 126) {
 $masks = substr($text, 4, 4);
 $data = substr($text, 8);
}
elseif($length == 127) {
 $masks = substr($text, 10, 4);
 $data = substr($text, 14);
}
else {
 $masks = substr($text, 2, 4);
 $data = substr($text, 6);
}
$text = "";
for ($i = 0; $i < strlen($data); ++$i) {
 $text .= $data[$i] ^ $masks[$i%4];
}
return $text;
}

//编码数据
function mask($text)
{
$b1 = 0x80 | (0x1 & 0x0f);
$length = strlen($text);

if($length <= 125)
 $header = pack('CC', $b1, $length);
elseif($length > 125 && $length < 65536)
 $header = pack('CCn', $b1, 126, $length);
elseif($length >= 65536)
 $header = pack('CCNN', $b1, 127, $length);
return $header.$text;
}

//握手的逻辑
function perform_handshaking($receved_header,$client_conn, $host, $port)
{
$headers = array();
$lines = preg_split("/\r\n/", $receved_header);
foreach($lines as $line)
{
 $line = chop($line);
 if(preg_match('/\A(\S+): (.*)\z/', $line, $matches))
 {
 $headers[$matches] = $matches;
 }
}

$secKey = $headers['Sec-WebSocket-Key'];
$secAccept = base64_encode(pack('H*', sha1($secKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));
$upgrade= "HTTP/1.1 101 Web Socket Protocol Handshake\r\n" .
"Upgrade: websocket\r\n" .
"Connection: Upgrade\r\n" .
"WebSocket-Origin: $host\r\n" .
"WebSocket-Location: ws://$host:$port/demo/shout.php\r\n".
"Sec-WebSocket-Accept:$secAccept\r\n\r\n";
socket_write($client_conn,$upgrade,strlen($upgrade));
}</pre>
</div>
View Code</div>

</div>
<div id="MySignature" role="contentinfo">
纵然世间炎凉百态！我自依旧初心不改！！ 
来源：https://www.cnblogs.com/phpk/p/10930335.html

頁: [1]

琼殿技术论坛's Archiver

一个websocket的demo(php server)