検索
ホームページ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 までご連絡ください。
SpringBoot怎么整合WebSocket实现后端向前端发送消息SpringBoot怎么整合WebSocket实现后端向前端发送消息May 11, 2023 pm 02:07 PM

一、什么是websocket接口使用websocket建立长连接,服务端和客户端可以互相通信,服务端只要有数据更新,就可以主动推给客户端。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocketAPI中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在WebSocketAPI中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

在ThinkPHP6中使用Nginx反向代理Websocket在ThinkPHP6中使用Nginx反向代理WebsocketJun 20, 2023 pm 09:31 PM

在近几年的互联网应用中,Websocket已经成为了一种非常重要的通信协议。ThinkPHP6作为一款优秀的PHP开发框架,也提供了对Websocket的支持。不过,在使用Websocket时,我们通常会涉及到跨域、负载均衡等问题,因此,在这篇文章中,我们将介绍如何在ThinkPHP6中使用Nginx反向代理Websocket。首先,我们需要明确一下Webs

Python服务器编程:实现WebSocket服务端Python服务器编程:实现WebSocket服务端Jun 19, 2023 am 09:51 AM

近年来,WebSocket技术日渐流行,成为了浏览器与服务器之间进行实时通信的标准选择。在Python中,我们可以通过一些成熟的库来实现WebSocket服务端的开发。本文将在介绍WebSocket技术的基础上,探索如何利用Python开发WebSocket服务端。一、什么是WebSocketWebSocket是一种在单个TCP

SpringBoot怎么实现WebSocket即时通讯SpringBoot怎么实现WebSocket即时通讯May 12, 2023 am 09:13 AM

1、引入依赖org.springframework.bootspring-boot-starter-websocketorg.projectlomboklombokcom.alibabafastjson1.2.32、WebSocketConfig开启WebSocketpackagecom.shucha.deveiface.web.config;/***@authortqf*@Description*@Version1.0*@since2022-04-1215:35*/importorg.spri

浏览器支持WebTransport?它能替代WebSockets?浏览器支持WebTransport?它能替代WebSockets?Feb 23, 2023 pm 03:36 PM

许多应用程序,如游戏和直播等场景,需要一种机制来尽可能快地发送消息,同时可以接受无序、不可靠的数据传输方式。本机应用程序虽然可以使用原始 UDP 套接字,但这些在 Web 上不可用,因为它们缺乏加密、拥塞控制、同意发送机制(以防止 DDoS 攻击)。

Spring Boot中使用WebSocket实现推送和通知功能Spring Boot中使用WebSocket实现推送和通知功能Jun 23, 2023 am 11:47 AM

在现代Web应用程序开发中,WebSocket是实现即时通信和实时数据传输的常用技术。SpringBoot框架提供了集成WebSocket的支持,使得开发者可以非常方便地实现推送和通知功能。本文将介绍SpringBoot中如何使用WebSocket实现推送和通知功能,并演示一个简单的实时在线聊天室的实现。创建SpringBoot项目首先,我们需要创建一

PHP+Socket系列之实现websocket聊天室PHP+Socket系列之实现websocket聊天室Feb 02, 2023 pm 04:39 PM

本篇文章给大家带来了关于php+socket的相关知识,其中主要介绍了怎么使用php原生socket实现一个简易的web聊天室?感兴趣的朋友下面一起来看一下,希望对大家有帮助。

如何在Linux中使用WebSocket技术如何在Linux中使用WebSocket技术Jun 18, 2023 pm 07:38 PM

随着现代网络应用程序的增多,WebSocket技术也变得非常流行。它是一项基于TCP协议的长连接技术,可以在客户端和服务器之间创建双向通信管道。在本文中,我们将介绍如何在Linux系统中使用WebSocket技术来创建一个简单的实时聊天应用程序。一、安装Node.js要使用WebSocket,首先需要在Linux系统中安装Node.j

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ヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

EditPlus 中国語クラック版

EditPlus 中国語クラック版

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

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン