|
安裝好swoole后開始搭建 前端 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>聊天室</title> </head> <style> #set_name{ margin: auto; text-align: center; } </style> <body> <h3 style="text-align: center">亮亮的聊天室</h3> <div id="set_name"> 姓名:<input name="name" id="name"><input type="button" onclick="set_name();" value="進入群聊"> </div> <div id="chat" style="width: 600px; border: red 1px solid;margin: auto;display: none"> <div id="sayContent" style="height: 300px;border-bottom: silver 1px dashed;"> </div> <div style="height: 75px;margin-top: 10px"> <textarea id="content" style="height: 50px;width: 480px;background-color: #00a0e9;float: left;"></textarea> <button id="submit" style="float: right;height: 55px;width:50px;margin-right:45px;display: block;" onclick="send_msg();">發(fā)送</button> </div> </div> <script> var name = ws = '' ; //執(zhí)行websock function chat() { var wsserver = 'ws://47.94.11.195:443'; //調(diào)用WebSocket對象建立連接 //ws wss: // ip:port(字符串) ws = new WebSocket(wsserver); //獲取聊天內(nèi)容展示窗口 var sayContent = document.getElementById('sayContent'); //onopen監(jiān)聽連接打開 ws.onopen = function (v) { var user = new Object(); user.name = name; user.type = 1;//對用戶設(shè)置姓名 var json = JSON.stringify(user); ws.send(json);//發(fā)送數(shù)據(jù) } //onmessage監(jiān)聽服務(wù)器數(shù)據(jù)推送 ws.onmessage = function (v) { var html = sayContent.innerHTML; sayContent.innerHTML = html + "<br>"+v.data; } //監(jiān)聽連接關(guān)閉 ws.onclose = function (v) { var html = sayContent.innerHTML; sayContent.innerHTML = html + "<br>聊天室已關(guān)閉!"; } } //設(shè)置用戶名 function set_name() { name = document.getElementById('name').value; if(name == ''){ alert('請輸入用戶名!'); return false; } document.getElementById('set_name').style.display='none'; document.getElementById('chat').style.display='block'; chat(); } function send_msg() { var content = document.getElementById('content'); if(content.value == ''){ alert('請輸入聊天內(nèi)容!'); return false; } var msg = new Object(); msg.content = content.value; msg.type = 2; var str = JSON.stringify(msg); ws.send(str); } </script> </body> </html> 后臺 <?php $server = new swoole_websocket_server("0.0.0.0", 443); $server->users = []; $server->on('open', function (swoole_websocket_server $server, $request) { $server->users[$request->fd]['id'] = $request->fd; }); $server->on('message', function (swoole_websocket_server $server, $frame) { $data = json_decode($frame->data,true); if($data['type'] == 1){ $server->users[$frame->fd]['name']=$data['name']; $server->push($frame->fd,'歡迎您('.$data['name'].')進入聊天室!'); }else{ foreach($server->users as $v){ $server->push($v['id'], $server->users[$frame->fd]['name'].'說:'.$data['content']); } } }); $server->on('close', function ($ser, $fd) { file_put_contents('qq.txt',$server->users[$frame->fd],FILE_APPEND); unset($server->users[$frame->fd]); }); $server->start(); <?php # 定義 clientFds 數(shù)組 保存所有 websocket 連接 $clientFds = []; # 創(chuàng)建 websocket 服務(wù) $server = new swoole_websocket_server("0.0.0.0", 8080); # 握手成功 觸發(fā)回調(diào)函數(shù) $server->on('open', function (swoole_websocket_server $server, $request) use (&$clientFds) { # echo "server: handshake success with fd{$request->fd}\n"; # 將所有客戶端連接標識,，握手成功后保存到數(shù)組中 $clientFds[] = $request->fd; }); # 收到消息 觸發(fā)回調(diào)函數(shù) $server->on('message', function (swoole_websocket_server $server, $frame) use (&$clientFds) { # echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n"; # $server->push($frame->fd, "this is server"); # 當有用戶發(fā)送信息,，發(fā)送廣播通知所有用戶 foreach ($clientFds as $fd) { $server->push($fd, $frame->data); } }); # 關(guān)閉連接 觸發(fā)回調(diào)函數(shù) $server->on('close', function ($ser, $fd) use (&$clientFds) { # echo "client {$fd} closed\n"; # 關(guān)閉會話 銷毀標識 fd # 根據(jù) value 去數(shù)組中找對應(yīng)的 key $res = array_search($fd, $clientFds, true); unset($clientFds[$res]); }); # 啟動 websocket 服務(wù) $server->start(); <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket 聊天室</title> </head> <body> <div id="main" style="width:600px;height: 200px; overflow: auto;border: solid 2px black;"> </div> <textarea id="textarea"></textarea> <br/> <input type="button" value="發(fā)送數(shù)據(jù)" onclick="send()"> <script type="text/javascript" src="https://cdn./jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> var name =prompt("請輸入您的昵稱","匿名者"); //彈出 input 框 // 打開一個 web socket var ws = new WebSocket("ws://ip:8080"); ws.onopen = function() { console.log("連接成功"); }; //收到消息 觸發(fā)回調(diào) ws.onmessage = function (evt) { var data = evt.data; console.log("收到 socket 服務(wù)消息，內(nèi)容：" + data); $('#main').append("<p>" + data + "</p>"); }; function send() { var data = document.getElementById('textarea').value; ws.send(name+ ":"+ data); } ws.onclose = function() { // 關(guān)閉 websocket console.log("連接已關(guān)閉..."); }; </script> </body> </html> |
|
|
