JavaScript に基づいてリアルタイムチャットルームを構築する-jsチュートリアル-php.cn

JavaScript に基づいてリアルタイムチャットルームを構築する

王林

リリース： 2023-08-10 23:18:16

オリジナル

1319 人が閲覧しました

JavaScript に基づいてリアルタイムチャットルームを構築する

JavaScript ベースのリアルタイムチャットルームの構築

インターネットの急速な発展に伴い、人々はインスタントメッセージングとリアルタイムにますます注目するようになりました。インタラクティブな体験。一般的なインスタントメッセージングツールとして、リアルタイムチャットルームは個人と企業の両方にとって非常に重要です。この記事では、JavaScript を使用して簡単なリアルタイムチャットルームを構築する方法と、対応するコード例を紹介します。

まず、チャットルームの UI インターフェイスとしてフロントエンドページが必要です。簡単な HTML 構造の例を次に示します。

<!DOCTYPE html>
<html>
<head>
    <title>实时聊天室</title>
    <style>
        #messages {
            height: 400px;
            overflow: scroll;
            border: 1px solid grey;
        }
    </style>
</head>
<body>
    <div id="messages"></div>
    <input type="text" id="input" placeholder="输入消息">
    <button onclick="sendMessage()">发送</button>
</body>
</html>

ログイン後にコピー

上記のコードでは、メッセージを表示し、固定の高さとスクロールバースタイルを設定するための <div> 要素を作成しました。次に、ユーザーがメッセージを入力できるテキストボックスとボタン、およびメッセージを送信するボタンを追加しました。

次に、リアルタイムチャットルームのロジックを処理するために、対応する JavaScript コードを記述する必要があります。以下は簡単な実装例です:

// 创建一个WebSocket连接
const socket = new WebSocket('ws://localhost:3000');

// 当连接建立时执行
socket.onopen = function(event) {
    console.log('已连接到服务器');
};

// 当收到服务器消息时执行
socket.onmessage = function(event) {
    const messages = document.getElementById('messages');
    const message = document.createElement('div');
    message.innerText = event.data;
    messages.appendChild(message);
    // 滚动到最底部
    messages.scrollTop = messages.scrollHeight;
};

// 发送消息
function sendMessage() {
    const input = document.getElementById('input');
    const message = input.value;
    socket.send(message);
    input.value = '';
}

ログイン後にコピー

上記のコードでは、JavaScript で WebSocket API を使用してサーバーとのリアルタイム接続を確立します。接続が正常に確立されると、onopen イベントを受け取ります。サーバーからメッセージを受信すると、onmessage イベントが発生し、受信したメッセージをメッセージ表示領域に追加し、スクロールバーの位置を設定することで自動的に下までスクロールします。

最後に、メッセージを処理して転送するために、サーバー側で WebSocket サーバーを作成する必要があります。 Node.js と WebSocket ライブラリを使用した例を次に示します。

const WebSocket = require('ws');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 3000 });

// 当有新的WebSocket连接建立时执行
wss.on('connection', function(ws) {
    console.log('有新的连接');

    // 当收到消息时执行
    ws.on('message', function(message) {
        console.log('收到消息: ' + message);

        // 将消息广播给所有连接的客户端
        wss.clients.forEach(function(client) {
            client.send(message);
        });
    });
});

ログイン後にコピー

上記のコードでは、WebSocket ライブラリを使用して WebSocket サーバーを作成しました。新しい接続が確立されると、connection イベントがトリガーされます。メッセージを受信すると、message イベントがトリガーされ、受信したメッセージが接続されているすべてのクライアントにブロードキャストされます。

上記の簡単なコード例を使用すると、JavaScript に基づいてリアルタイムチャットルームを実装できます。ユーザーがメッセージを入力して送信ボタンをクリックすると、メッセージは WebSocket 接続を通じてサーバーに送信され、サーバーによって接続されているすべてのクライアントに転送されます。クライアントはメッセージを受信すると、それを UI インターフェイスに表示します。このプロセス全体がリアルタイム通信の機能を実現します。

もちろん、上記の例は単純な実装にすぎず、実際のリアルタイムチャットルームでは、切断と再接続、ユーザー認証、プライベートチャットなどの他の機能を処理する必要があります。この記事が、独自のリアルタイムチャットルームの構築に役立つ基本的なアイデアとコード例を提供できれば幸いです。

以上がJavaScript に基づいてリアルタイムチャットルームを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。