如何利用webSocket與Swoole打造一個(gè)小型聊天室

這篇文章給大家分享的是有關(guān)如何利用webSocket與Swoole打造一個(gè)小型聊天室的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司一直通過網(wǎng)站建設(shè)和網(wǎng)站營(yíng)銷幫助企業(yè)獲得更多客戶資源。以"深度挖掘，量身打造，注重實(shí)效"的一站式服務(wù)，以網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)互聯(lián)產(chǎn)品、營(yíng)銷型網(wǎng)站服務(wù)為核心業(yè)務(wù)。10余年網(wǎng)站制作的經(jīng)驗(yàn)，使用新網(wǎng)站建設(shè)技術(shù)，全新開發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價(jià)格便宜而且實(shí)用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡(jiǎn)單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

本來就是作為一個(gè)很小的案例來寫的，包含的功能點(diǎn)也不是那多，索性就按照最最最低配置來搞。

能夠顯示聊天消息的聊天區(qū)，同時(shí)兼顧顯示鏈接狀態(tài)，當(dāng)前是否連接成功，或者服務(wù)端是否斷開連接，而前端不知道的狀況。
一個(gè)輸入框，純粹的輸入框 ?
點(diǎn)擊按鈕發(fā)送不刷新頁(yè)面，同時(shí)清空當(dāng)前輸入框內(nèi)容，就簡(jiǎn)單的一個(gè) button 而已，點(diǎn)擊執(zhí)行，不支持回車發(fā)送。
收到消息，滾動(dòng)條自動(dòng)觸底，這個(gè)功能在某些使用場(chǎng)景是方便的，但又會(huì)造成某些場(chǎng)景使用不方便，方便在于有新消息不需要人工滾動(dòng)，不方便在于，可能你在看歷史消息，它自動(dòng)觸底了…還需要根據(jù)自己實(shí)際需求優(yōu)化一下下。
隨機(jī)昵稱，當(dāng)然不需要保存，刷新即丟，在收到消息如果是自己發(fā)送的，則顯示 [ 我 ] 在某某時(shí)候發(fā)送了某某消息，而不是顯示昵稱字符串。

項(xiàng)目環(huán)境

直接粘貼復(fù)制的

composer create-project topthink/think tpcd tpcomposer require topthink/think-swoole

因?yàn)槭菧y(cè)試項(xiàng)目，所有的都是默認(rèn)安裝，在安裝完之后，訪問前端頁(yè)面，使用 view 方法會(huì)報(bào)錯(cuò)，百度一下就有解決方案了。

webSocket 的使用

參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

onopen() 發(fā)起連接，連接成功后執(zhí)行。
onclose() 連接斷開后執(zhí)行。
onmessage() 收到服務(wù)端消息后執(zhí)行。
onerror() 服務(wù)器異常執(zhí)行。
其實(shí)，webSocket 就這些常用方法，也沒啥特殊要求的，他就是作為一個(gè)保持連接，接收服務(wù)器狀態(tài)的一個(gè)瀏覽器的 API 存在，非常簡(jiǎn)潔方便。

前端頁(yè)面代碼：

        打工人聊天室                               聊天區(qū)域

            你好打工人：昵稱
            本次連接FD:
                                    發(fā)送

JS 代碼：

在服務(wù)器信息回執(zhí)時(shí)，會(huì)有第一次連接回執(zhí)，還是服務(wù)端發(fā)送消息回執(zhí)的狀態(tài)區(qū)別，通過 msgType 來分辨，如果是第一次連接的回執(zhí)消息，則把 FD 做一個(gè)頁(yè)面留存，并不顯示在聊天消息區(qū)，如果收到的是消息回執(zhí)，就直接顯示到聊天消息區(qū)。

還有就是，前后端相互通信發(fā)送的東西，都是字符串性質(zhì)最優(yōu)，我前端處理的方法是先組合成一個(gè)對(duì)象，然后轉(zhuǎn) JSON 串。

服務(wù)端代碼
服務(wù)端需要 callback 前端過來的消息，轉(zhuǎn)成對(duì)象數(shù)據(jù)，然后增加點(diǎn)自定義數(shù)據(jù)直接原樣返回，并且群發(fā)到前端。

on('open', function ($ws, $request){        $fd = $request->fd;        $data = json_encode([            'fd' => $request->fd,            'msgType' => 1  //代表第一次連接，前端處理fd        ]);        $ws->push($request->fd, $data);    });    //監(jiān)聽WebSocket消息事件    $ws->on('message', function ($ws, $frame) {        $stats = $ws->stats();        //格式化接收到j(luò)son        $data = json_decode($frame->data);        // 原基礎(chǔ)上不動(dòng)，增加一些自定義        $data->msgType = 2; //代表服務(wù)器端回復(fù)        $data->time = date('Y-m-d H-i-s');        $data = json_encode($data);        //因?yàn)槭橇奶焓遥园ㄗ约憾夹枰盏交貓?zhí)，就直接群發(fā) swoole 提供 connections 方法 包含了所有在線的 fd        foreach ($ws->connections as $conn_fd){            $ws->push($conn_fd,$data);        }    });    //監(jiān)聽WebSocket連接關(guān)閉事件    $ws->on('close', function ($ws, $fd) {//        echo "client-{$fd} is closed\n";    });    $ws->start();

代碼齊全之后，接下來就只需要在控制臺(tái)執(zhí)行以下 PHP 文件就行。
如何利用webSocket與Swoole打造一個(gè)小型聊天室

然后前臺(tái)直接訪問你的網(wǎng)站地址，我的是本地 127.0.0.1
如何利用webSocket與Swoole打造一個(gè)小型聊天室

多開幾個(gè)窗口模擬多個(gè)用戶，然后發(fā)送消息測(cè)試即可：
如何利用webSocket與Swoole打造一個(gè)小型聊天室

感謝各位的閱讀！關(guān)于“如何利用webSocket與Swoole打造一個(gè)小型聊天室”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章標(biāo)題：如何利用webSocket與Swoole打造一個(gè)小型聊天室
本文網(wǎng)址：http://weahome.cn/article/ijipog.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

如何利用webSocket與Swoole打造一個(gè)小型聊天室

項(xiàng)目環(huán)境

webSocket 的使用

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管