検索
ホームページPHPフレームワークSwoolewebSocket と Swoole を使用して小さなチャット ルームを作成する

まえがき

今回はwebSocketとSwooleを使って小規模なチャットルームを作成する場合のみ記録します。良いエントリーケースとして。

プロジェクトの紹介

元々は非常に小規模なケースとして書かれており、それほど多くの機能点が含まれていなかったので、最小限の構成に従っただけです。

  • チャット メッセージを表示できるチャット領域。リンク ステータス、現在の接続が成功したかどうか、サーバーが切断されているかどうか、フロントエンドが切断されているかどうかも考慮されます。状況を知ってください。

  • 入力ボックス、純粋な入力ボックス?

  • ボタンをクリックしてページを更新せずに送信し、同時に入力ボックスをクリアします。現在の入力ボックスの内容です。これは単純です。単なるボタンです。クリックして実行します。Enter キーを押して送信することはできません。

  • メッセージを受信するとスクロールバーが自動的に下に下がりますが、この機能は利用シーンによっては便利ですが、利用シーンによっては不便になることもあります。新しいメッセージが利用できないという事実。手動でスクロールする必要がある。不便なのは、おそらく過去のニュースを見ていると、自動的に底をついてしまうことだ。実際のニーズに応じて最適化する必要もある。

  • ランダムなニックネーム、もちろん保存する必要はありません、更新すると失われます、メッセージを受信すると、自分から送信したものであれば「私」が送信しましたと表示されますニックネームの文字列を表示する代わりに、これこれのときに特定のメッセージを表示します。

プロジェクト環境

コピーしたものを直接貼り付けます

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

テストプロジェクトなので、デフォルトですべてがインストールされます。インストール後、フロントエンド ページにアクセスすると、view メソッドを使用するとエラーが報告されますが、Baidu はすぐに解決策を提供します。

webSocket の使用法

参考ドキュメント: https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

  1. onopen() は接続を開始し、接続が成功した後に実行されます。
  2. onclose() は、接続が切断された後に実行されます。
  3. onmessage() は、サーバー メッセージを受信した後に実行されます。
  4. onerror() サーバーが異常に実行されました。
    実は、webSocket はこれらの一般的なメソッドを備えており、特別な要件はなく、接続を維持したりサーバーの状態を受信したりするためのブラウザー API として存在しており、非常にシンプルで便利です。

フロントエンド ページ コード:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>打工人聊天室</title>   <!--需要引入jq 文件--></head><style>    .content {        height: 400px;        max-width: 400px;        overflow: auto;        border-radius: 5px;        border: 1px solid #f0f0f0;    }</style><body>            <div id="content" class="content">                <p>聊天区域</p>            </div>            你好打工人:<samp id="nickname">昵称</samp> <br>            本次连接FD: <samp id="fd-samp"></samp> <br>            <input type="text" id="msg">            <input type="hidden" id="fd" value="">            <button id="send" onclick="send()">发送</button></body></html>

JS コード:

サーバー情報を受信すると、最初の接続の受信確認、またはサーバーから送信されたメッセージの受信メッセージです。ステータスの違いはmsgTypeで区別されます。初回接続時の受信メッセージの場合、FDはページ上に保存され、チャットメッセージエリアには表示されません。メッセージの場合は、FDはページ上に保存されます。受信通知を受信すると、チャット メッセージ領域に直接表示されます。

また、フロントエンドとバックエンドの通信で送信されるものはすべて最高の文字列の性質を持っており、私のフロントエンドの処理方法は、まずオブジェクトに結合してから、それを JSON に変換することです。弦。

<script>    //滚动条最底部    function scrolltest() {        var div = document.getElementById("content");        div.scrollTop = div.scrollHeight;    }    var wsServer = &#39;ws://127.0.0.1:9502&#39;;    var websocket = new WebSocket(wsServer);    var nickname = Math.random().toString(36).substr(2);    thisFd = &#39;&#39;;    $(&#39;#nickname&#39;).html(nickname);    //点击发送    function send() {        var msg = $(&#39;#msg&#39;).val();        var data = {            &#39;nickname&#39;: nickname,            &#39;fd&#39;: thisFd,            &#39;data&#39;: msg        }        //生成json 方便后台接收以及使用        var data = JSON.stringify(data);        websocket.send(data);        //然后清空        $(&#39;#msg&#39;).val(&#39;&#39;);    }    //链接成功    websocket.onopen = function (evt) {        $("#content >p:last-child").after(&#39;<p> 服务器已连接,开始聊天吧 </p>&#39;);    };    //链接断开    websocket.onclose = function (evt) {        $("#content >p:last-child").after(&#39;<p> 服务器已断开,请重新连接 </p>&#39;);    };    //收到服务器消息    websocket.onmessage = function (evt) {        //握手成功后,会接受到服务端返回的fd ,msgType = 1        //字符串格式化成json        var data = eval(&#39;(&#39; + evt.data + &#39;)&#39;);        // console.log(evt.data);        switch (data.msgType) {            case 1:                thisFd = data.fd;                $(&#39;#fd-samp&#39;).html(thisFd);                $(&#39;#fd&#39;).val(thisFd);                break;            case 2:                if (data.nickname == nickname) {                    data.nickname = &#39;我&#39;;                }                $("#content >p:last-child").after(&#39;<p>&#39; + data.nickname + &#39; 在 &#39; + data.time + &#39; 说:<br>&#39; + data.data + &#39;</p>&#39;);                //接收到消息自动触底                scrolltest();                break;        }    };    //服务器异常    websocket.onerror = function (evt, e) {        $("#content >p:last-child").after(&#39;<p> 服务器异常 </p>&#39;);    };</script>

サーバー側コード
サーバーは、フロントエンドからメッセージをコールバックし、それをオブジェクト データに変換し、カスタム データを追加してそのまま直接返し、送信する必要があります。フロントエンドを一括で。

<?php    //创建WebSocket Server对象,监听0.0.0.0:9502端口    $ws = new Swoole\WebSocket\Server(&#39;0.0.0.0&#39;, 9502);    //监听WebSocket连接打开事件    $ws->on(&#39;open&#39;, function ($ws, $request){        $fd = $request->fd;        $data = json_encode([            &#39;fd&#39; => $request->fd,            &#39;msgType&#39; => 1  //代表第一次连接,前端处理fd        ]);        $ws->push($request->fd, $data);    });    //监听WebSocket消息事件    $ws->on(&#39;message&#39;, function ($ws, $frame) {        $stats = $ws->stats();        //格式化接收到json        $data = json_decode($frame->data);        // 原基础上不动,增加一些自定义        $data->msgType = 2; //代表服务器端回复        $data->time = date(&#39;Y-m-d H-i-s&#39;);        $data = json_encode($data);        //因为是聊天室,所以包括自己都需要收到回执,就直接群发 swoole 提供 connections 方法 包含了所有在线的 fd        foreach ($ws->connections as $conn_fd){            $ws->push($conn_fd,$data);        }    });    //监听WebSocket连接关闭事件    $ws->on(&#39;close&#39;, function ($ws, $fd) {//        echo "client-{$fd} is closed\n";    });    $ws->start();

コードが完了したら、コンソールで次の PHP ファイルを実行するだけです。

フロント デスクはあなたの Web サイト アドレスに直接アクセスします。私のアドレスはローカル 127.0.0.1

さらにいくつかのウィンドウを開いて複数のユーザーをシミュレートします。次に、テストするメッセージを送信します:

こんにちは、作業員。

コードは非常にシンプルでそれほど難しくありませんが、webScoket と Swoole の機能を非常に簡潔に反映できます。

以上がwebSocket と Swoole を使用して小さなチャット ルームを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Swoole Open-Sourceプロジェクトに貢献するにはどうすればよいですか?Swoole Open-Sourceプロジェクトに貢献するにはどうすればよいですか?Mar 18, 2025 pm 03:58 PM

この記事では、バグの報告、機能の送信、コーディング、ドキュメントの改善など、スウールプロジェクトに貢献する方法の概要を説明しています。それは、初心者が貢献を開始するために必要なスキルとステップについて議論し、プレスを見つける方法は

カスタムモジュールでSwooleを拡張するにはどうすればよいですか?カスタムモジュールでSwooleを拡張するにはどうすればよいですか?Mar 18, 2025 pm 03:57 PM

記事では、スウールをカスタムモジュールで拡張し、手順を詳細に、ベストプラクティスを詳細にし、トラブルシューティングで説明します。主な焦点は、機能と統合を強化することです。

Swooleの非同期I/O機能を使用するにはどうすればよいですか?Swooleの非同期I/O機能を使用するにはどうすればよいですか?Mar 18, 2025 pm 03:56 PM

この記事では、高性能アプリケーション用のPHPでSwooleの非同期I/O機能を使用することについて説明します。インストール、サーバーのセットアップ、および最適化戦略をカバーします。ワードカウント:159

Swooleのプロセス分離を構成するにはどうすればよいですか?Swooleのプロセス分離を構成するにはどうすればよいですか?Mar 18, 2025 pm 03:55 PM

記事では、Swooleのプロセス分離の構成、安定性とセキュリティの改善などの利点、トラブルシューティング方法について説明します。

Swooleの反応器モデルはフードの下でどのように機能しますか?Swooleの反応器モデルはフードの下でどのように機能しますか?Mar 18, 2025 pm 03:54 PM

Swooleの原子炉モデルは、イベント駆動型の非ブロッキングI/Oアーキテクチャを使用して、高電流シナリオを効率的に管理し、さまざまなテクニックを通じてパフォーマンスを最適化します。(159文字)

Swooleの接続問題をトラブルシューティングするにはどうすればよいですか?Swooleの接続問題をトラブルシューティングするにはどうすればよいですか?Mar 18, 2025 pm 03:53 PM

記事では、PHPフレームワークであるSwooleの接続問題のトラブルシューティング、原因、監視、および予防について説明します。

Swooleのパフォーマンスを監視するためにどのツールを使用できますか?Swooleのパフォーマンスを監視するためにどのツールを使用できますか?Mar 18, 2025 pm 03:52 PM

この記事では、Swooleのパフォーマンスを監視および最適化するためのツールとベストプラクティス、およびパフォーマンスの問題の方法のトラブルシューティングについて説明します。

Swooleアプリケーションのメモリリークを解決するにはどうすればよいですか?Swooleアプリケーションのメモリリークを解決するにはどうすればよいですか?Mar 18, 2025 pm 03:51 PM

要約:この記事では、不適切なリソース管理や管理されていないコルーチンなどの一般的な原因を強調し、識別、分離、修正を通じて、スウールアプリケーションのメモリリークの解決について説明します。 Swoole TrackerやValgrindなどのツール

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール