ホームページ > 記事 > ウェブフロントエンド > WebSocket と JavaScript を使用してオンライン共同エディターを実装する方法

WebSocket と JavaScript を使用してオンライン共同エディターを実装する方法

WBOYオリジナル: 2023-12-17 13:37:25842ブラウズ

リアルタイム共同エディターは、最新の Web 開発の標準となっており、特にさまざまなチームコラボレーション、オンラインドキュメント編集、タスク管理シナリオにおいて、WebSocket に基づくリアルタイム通信テクノロジにより改善が可能です。チームメンバー間のコミュニケーション効率とコラボレーション。この記事では、WebSocket と JavaScript を使用してシンプルなオンライン共同エディターを構築する方法を紹介し、読者が WebSocket の原理と使用法をよりよく理解できるようにします。

WebSocket の基本原理を理解する

WebSocket は、Web ブラウザとサーバーの間に永続的な接続を確立できる、TCP プロトコルに基づく双方向通信テクノロジです。 . そしてリアルタイムのメッセージプッシュとデータ送信を実現します。従来の HTTP プロトコルのステートレス要求応答モードと比較して、WebSocket には次の利点があります。

ポーリングやページの更新を必要としない、サーバーとクライアント間のリアルタイムの双方向通信
単一の TCP 接続でのメッセージ交換をサポートし、ネットワークオーバーヘッドを削減します。
ネットワークスループットを向上させ、遅延を削減し、クライアント間で効率的にデータを送信できます。

WebSocket プロトコルと HTTP プロトコルは似ています。ですが、WebSocket プロトコルのハンドシェイクプロセスは少し異なります。 WebSocket ハンドシェイクでは、接続要求を示すために HTTP リクエストを通じて特別なヘッダー情報を送信する必要があります。サーバーが接続を受け入れる場合は、接続が確立されたことを示すステータスコード 101 が返されます。クライアントとサーバーが正常に接続された後は、クライアントまたはサーバーが接続を終了するまで、WebSocket 接続は開いたままになります。

WebSocket API は、WebSocket 接続を作成および管理するために JavaScript コードで使用できる WebSocket オブジェクトを提供します。 WebSocket の基本的な使用法は次のとおりです。

// 创建WebSocket对象
let socket = new WebSocket('ws://localhost:8080');

// WebSocket事件处理函数
socket.onopen = function() {
  console.log('WebSocket连接已打开');
};
socket.onmessage = function(event) {
  console.log('WebSocket收到消息:', event.data);
};
socket.onclose = function() {
  console.log('WebSocket连接已关闭');
};

// 发送消息到服务器
socket.send('Hello, WebSocket!');

オンライン共同エディターの基本機能の実装

オンライン共同エディターを実装するには、以下を実装する必要があります。 WebSocket に基づく単純なサーバークライアントプログラムは、クライアントから送信されたテキストメッセージを受け入れて処理し、同時に処理結果をすべてのクライアントに送り返すために使用されます。ここでは、Node.js と WebSocket ライブラリを使用してサーバー側プログラムを実装します。まず、ターミナルウィンドウで次のコマンドを実行して、新しい Node.js プロジェクトを作成します:

mkdir websocket-editor
cd websocket-editor
npm init -y

次に、npm コマンドを使用して WebSocket ライブラリをインストールします:

npm install ws

次に、プロジェクトを作成します。 server.js という名前のファイルに、次のコードを記述します。

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

let sharedText = '';

wss.on('connection', (ws) => {
  console.log('Client connected');

  // 发送当前文本到客户端
  ws.send(sharedText);

  // 接收客户端的文本消息
  ws.on('message', (message) => {
    console.log('Received message:', message);
    sharedText = message;

    // 发送文本消息给所有客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(sharedText);
      }
    });
  });
});

上記のコードは、WebSocket ライブラリを使用して、ポート 8080 でリッスンする WebSocket サーバーを作成します。クライアントがサーバーに接続すると、サーバーは現在のテキストコンテンツをクライアントに送信します。同時に、サーバーはクライアントから送信されたテキストメッセージをリッスンし、共有テキストを更新し、処理結果をすべてのクライアントに送信します。

次は、クライアントページの HTML および JavaScript コードです:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>WebSocket Editor</title>
  <style>
  textarea {
    width: 100%;
    height: 300px;
    font-size: 16px;
    line-height: 1.4;
  }
  </style>
</head>
<body>
  <h1>WebSocket Editor</h1>
  <textarea id="editor"></textarea>
  <script>
    const socket = new WebSocket('ws://localhost:8080');
    const editor = document.getElementById('editor');

    socket.addEventListener('open', (event) => {
      console.log('WebSocket连接已打开');
    });

    socket.addEventListener('message', (event) => {
      console.log('WebSocket收到消息:', event.data);
      editor.value = event.data;
    });

    editor.addEventListener('input', (event) => {
      const text = event.target.value;
      socket.send(text);
    });
  </script>
</body>
</html>

上記のコードは、テキストボックスと WebSocket オブジェクトを作成します。ユーザーがテキストボックスにテキストを入力すると、クライアントはテキストメッセージがサーバーに送信され、サーバーは受信した新しいテキストメッセージをリッスンして、テキストボックスの内容を更新します。同時に、クライアントは、WebSocket 接続が成功した後にサーバーから送信された初期化テキストコンテンツも受信します。

これで、サーバープログラムを起動し、ブラウザでクライアントページを開くことができます。

node server.js

ブラウザを開いて http://localhost:8080/ にアクセスすると、シンプルなオンライン共同エディターが表示されます。 2 人以上のユーザーが同時に Web ページにアクセスすると、いずれかのユーザーがエディターにテキストを入力すると、他のユーザーはテキストがリアルタイムで更新されるのを確認できます。これにより、シンプルなオンライン共同エディターが実装されます。

概要

この記事の導入部を通じて、読者は WebSocket と JavaScript を使用してシンプルなオンライン共同エディターを構築する方法を学ぶことができます。 WebSocket は、Web アプリケーションの対話効果とコラボレーション効率を大幅に向上させるリアルタイムの双方向通信メカニズムを提供します。実際の開発では、WebSocket はオンラインコラボレーション、リアルタイムメッセージプッシュ、ゲーム開発、モノのインターネットなどの分野で広く使用されています。この記事が、読者が WebSocket と JavaScript テクノロジを活用してリアルタイム通信を実現するのに役立つことを願っています。

以上がWebSocket と JavaScript を使用してオンライン共同エディターを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html npm JS 对象 http websocket 物联网

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ECharts 円グラフ (リング): データの割合と構造の変化を表示する方法次の記事：ECharts 円グラフ (リング): データの割合と構造の変化を表示する方法

続きを見る