IM即使聊天初探--基於 swoole websocket 實現
阿新 • • 發佈:2020-10-25
僅為IM練習demo
php 檔案
<?php $user = []; $server = new Swoole\WebSocket\Server("127.0.0.1", 9501); $server->on('open', function (Swoole\WebSocket\Server $server, $request) { echo "新使用者 fd{$request->fd}\n"; global $user; $user[$request->fd]['id'] = $request->fd; $user[$request->fd]['name'] = "匿名使用者".mt_rand(1000,9999); var_export($user); }); $server->on('message', function (Swoole\WebSocket\Server $server, $frame) { echo "接收使用者 {$frame->fd} 訊息:{$frame->data}, opcode:{$frame->opcode},fin:{$frame->finish}\n"; // 迴圈發給使用者 global $user; $msg = $user[(int)$frame->fd]['name'] . ': '. $frame->data; var_dump($server->connections); // $server->connections 遍歷所有websocket連線使用者的fd,給所有使用者推送 foreach ($server->connections as $fd) { // 需要先判斷是否是正確的websocket連線,否則有可能會push失敗 if ($server->isEstablished($fd)) { $server->push($fd, $msg); } } }); $server->on('close', function ($ser, $fd) { echo "client {$fd} 下線\n"; global $user; unset($user[$fd]); }); $server->start();
前端頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IM DEMO BY JIHAN</title> <style> body { width: 100% } h2 { text-align: center; margin: auto 0px } #main { text-align: center; } #main div textarea{ margin: 0px auto; display: block; } #content_show { margin: 0px auto; width: 60%; border: 1px solid black; height: 400px; margin: auto 0px; display: inline-block; } #footer { text-align: center; } #footer input{ width: 200px; } </style> </head> <body> <h2>聊天廣場</h2> <div id='main' > <div id="content_show" > </div> <div id="footer"> <input type="text" id="input"> <button type="submit" id="btn" onclick="handleClick()" >提交</button> </div> </div> <script> // 建立webSocket 連結 const url = 'ws://localhost:9501' const socket = new WebSocket(url); let content = document.querySelector('#content_show'); // 連結 socket.onopen = function(event) { console.log('WebSocket is open now.', event) } // 訊息 socket.onmessage = function(event) { console.log('WebSocket message received:', event) console.log('data:', event.data) content.innerHTML += event.data + '<br/>' } // 錯誤 socket.onerror = function(event) { console.log('WebSocket is error now.', event) } //關閉 socket.onclose = function(event) { console.log('WebSocket is close now.') } function handleClick() { console.log('點選提交') let text = document.querySelector('input').value socket.send(text) } </script> </body> </html>
效果