ホームページ > 記事 > ウェブフロントエンド > JavaScript に基づいてリアルタイム チャット ルームを構築する
JavaScript に基づいてリアルタイム チャット ルームを構築する
- 王林オリジナル
- 2023-08-10 23:18:161276ブラウズ
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> 要素を作成しました。次に、ユーザーがメッセージを入力できるテキスト ボックスとボタン、およびメッセージを送信するボタンを追加しました。 <p>次に、リアルタイム チャット ルームのロジックを処理するために、対応する JavaScript コードを記述する必要があります。以下は簡単な実装例です: </p><pre class='brush:javascript;toolbar:false;'>// 创建一个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 = '';
}</pre><p> 上記のコードでは、JavaScript で WebSocket API を使用してサーバーとのリアルタイム接続を確立します。接続が正常に確立されると、<code>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 サイトの他の関連記事を参照してください。