JavaScript と WebSocket を使用してリアルタイムチャットルームを作成する方法-jsチュートリアル-php.cn

JavaScript と WebSocket を使用してリアルタイムチャットルームを作成する方法

WBOY

リリース： 2023-12-17 15:06:39

オリジナル

1185 人が閲覧しました

JavaScript と WebSocket を使用してリアルタイムチャットルームを作成する方法

はじめに: インターネットの継続的な発展に伴い、リアルタイムコミュニケーションはますます増えています。より重要。ライブチャットアプリは、多くの Web サイトやアプリの標準機能になっています。この記事では、JavaScript と WebSocket テクノロジーを使用して、簡単なリアルタイムチャットルームを構築する方法を紹介します。

1. WebSocket とは
WebSocket は、クライアントとサーバー間の双方向のリアルタイム通信を提供するプロトコルです。従来の HTTP プロトコルと比較して、WebSocket は遅延が短く、リアルタイムパフォーマンスが高く、クライアントとサーバーの間に永続的な接続を確立できます。 WebSocket は、ページを更新せずにリアルタイムでデータを送信できます。

2. 必要なツールと環境を実装します

Node.js、Java などの WebSocket サポートを備えたサーバー。
フロントエンド開発ツール (VS Code など)。
WebSocket をサポートするブラウザ (Chrome、Firefox など)。

3. サーバー側の作成

Node.js をインストールし、新しいプロジェクトフォルダーを作成します。
プロジェクトフォルダーでコマンドラインを開き、新しい Node.js プロジェクトを初期化します。次のコマンドを実行します:
```
 npm init
```
ログイン後にコピー
WebSocket モジュールをインストールします。次のコマンドを実行します。
```
 npm install websocket
```
ログイン後にコピー

次のコードを使用して WebSocket サーバーを作成します。

const WebSocket = require('websocket').server;
const http = require('http');

const server = http.createServer((request, response) => {});
server.listen(8080, () => {
 console.log('Server is listening on port 8080');
});

const wsServer = new WebSocket({
 httpServer: server
});

wsServer.on('request', (request) => {
 const connection = request.accept(null, request.origin);
 
 connection.on('message', (message) => {
     // 处理接收到的消息
     console.log('Received message: ', message.utf8Data);
     
     // 向客户端发送消息
     connection.sendUTF('Message received: ' + message.utf8Data);
 });
 
 connection.on('close', (reasonCode, description) => {
     // 处理连接关闭事件
     console.log('Connection closed');
 });
});

ログイン後にコピー

サーバーを保存して起動し、サーバーが適切に実行されていることを確認します。

4. クライアントの作成

プロジェクトフォルダーに新しい HTML ファイルを作成し、index.html という名前を付けます。

index.html に次のコードを挿入します。

<!DOCTYPE html>
<html>
<head>
 <title>实时聊天室</title>
</head>
<body>
 <form id="chatForm">
     <input type="text" id="messageInput" placeholder="输入消息">
     <button type="submit">发送</button>
 </form>
 <div id="chatBox"></div>

 <script>
     const chatForm = document.getElementById('chatForm');
     const messageInput = document.getElementById('messageInput');
     const chatBox = document.getElementById('chatBox');

     const socket = new WebSocket('ws://localhost:8080');

     socket.onopen = () => {
         console.log('连接已建立');
     };

     socket.onmessage = (event) => {
         const message = event.data;
         console.log('Received message: ', message);

         // 显示接收到的消息
         const messageElement = document.createElement('div');
         messageElement.innerText = message;
         chatBox.appendChild(messageElement);
     };

     chatForm.addEventListener('submit', (event) => {
         event.preventDefault();

         const message = messageInput.value;
         console.log('Sending message: ', message);

         // 发送消息到服务器
         socket.send(message);

         // 清空输入框
         messageInput.value = '';
     });
 </script>
</body>
</html>

ログイン後にコピー

index.html ファイルを保存してブラウザで開き、クライアントが正常に実行されていることを確認します。

5. チャットルームのテスト

ブラウザで複数のタブを開くと、各タブがチャットルームのユーザーとして機能します。
任意のタブページの入力ボックスにメッセージを入力して送信します。
各タブページで受信したメッセージを観察し、メッセージがリアルタイムで同期されていることを確認します。

上記の手順により、JavaScript と WebSocket を使用して簡単なリアルタイムチャットルームを構築することができました。ユーザー認証の追加、ルームの作成、写真の送信など、実際のニーズに合わせて拡張・最適化できます。

概要: この記事では、JavaScript と WebSocket を使用してリアルタイムチャットルームを作成する方法について説明します。 WebSocket はクライアントとサーバーの間に永続的な接続を確立し、高速でリアルタイムのデータ送信を実現します。この記事がリアルタイム通信アプリケーションの構築に役立つことを願っています。

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