Vue運用swoole 實現多人聊天
阿新 • • 發佈：2022-01-12
1：專案目錄新建php檔案和html檔案，這裡我建了一個swoole資料夾，chat.php 和chat.html
2:將專案同步上線
chat.php程式碼：
<?php //建立WebSocket Server物件，監聽0.0.0.0:9502埠 $ws = new Swoole\WebSocket\Server('0.0.0.0', 9507); //監聽WebSocket連線開啟事件 $ws->on('Open', function ($ws, $request) { $result = [ 'error_code' => 0, 'data' => ['data' => '歡迎來到多人聊天室', 'class' => '' ], 'msg' => '傳送成功' ]; $ws->push($request->fd, json_encode($result,256)); }); //監聽WebSocket訊息事件 $ws->on('Message', function ($ws, $frame) { //$frame->fd 當前客戶端的唯一標識 //$frame->data 客戶端傳送 的資料 //$ws->connections 獲取所有的客戶端連線物件foreach ($ws->connections as $fd) { if ($frame->fd == $fd) { $class = 'bubble me'; } else { $class = 'bubble you'; } $result = [ 'error_code' => 0, 'data' => [ 'data' => $frame->data,'class' => $class ], 'msg' => '傳送成功' ]; //傳送群聊中的所有人 $ws->push($fd, json_encode($result,256)); } }); //監聽WebSocket連線關閉事件 $ws->on('Close', function ($ws, $fd) { echo "client-{$fd} is closed\n"; }); $ws->start();
3：chat.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>線上聊天室</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/swools/chat/css/reset.min.css"> <link rel="stylesheet" href="/swools/chat/css/style.css"> </head> <body> <div class="wrapper"> <div class="container"> <div class="left"> <div class="top"> 線上人員 </div> <ul class="people"> <li class="person" data-chat="person1"> <img src="/swools/chat/img/thomas.jpg" alt="" /> <span class="name">張三</span> <span class="time">10:09</span> </li> <li class="person" data-chat="person2"> <img src="/swools/chat/img/dog.png" alt="" /> <span class="name">李四</span> <span class="time">10:44</span> </li> <li class="person" data-chat="person3"> <img src="/swools/chat/img/louis-ck.jpeg" alt="" /> <span class="name">王五</span> <span class="time">10:50</span> </li> </ul> </div> <div class="right"> <div class="top"><span><span class="name">多人聊天室</span></span></div> <div class="chat" data-chat="person2"> <!--template 相當於微信小程式block標籤，沒有實際樣式輸出，用來迴圈--> <template v-for="item in msgList"> <div :class="item.data.class"> {{ item.data.data }} </div> </template> </div> <div class="write"> <input type="text" v-model="msg" @keyup.enter="send()"/> <a href="javascript:;" class="write-link send" @click="send()"></a> </div> </div> </div> < </div> </body> </html> <script src="/swools/chat/js/index.js"></script> <!--<script src="/swools/chat/js/vue.js"></script>--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var wsServer = 'ws://139.224.63.57:9507'; var websocket = new WebSocket(wsServer); websocket.onmessage = function ({data}) { let json = JSON.parse(data) //接收到服務端推送過來的訊息 //進行追加到msgList數組裡 let msgArr = app.msgList msgArr.push(json) }; // window.onload = function () { // // } var app = new Vue({ el: '.wrapper', data: { msg: '', msgList: [] }, methods: { send() { //獲取輸入框裡面的值 let msg = this.msg //獲取發給誰 uid =1 //誰發的 uid=2 //傳送服務端 websocket.send(msg) this.msg = '' } } }) </script>
4：寶塔終端執行chat.php 檔案，切記切換到檔案目錄下執行.php檔案
php chat.php
5：將寶塔9507埠放行
6：阿里雲伺服器9507埠放行
效果圖：
git參考：
https://gitee.com/kezuo/swoole_chat
上線參考：
https://www.cnblogs.com/xiaoyantongxue/p/15629690.html