WebSocket と JavaScript を使用してオンライン共同エディターを実装する方法-jsチュートリアル-php.cn

WebSocket Editor

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 17, 2023 pm 01:37 PM

javascript websocket 共同編集者

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

リアルタイム共同エディターは、最新の 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 id="WebSocket-Editor">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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7504

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Java と WebSocket の組み合わせ: リアルタイムのビデオストリーミングを実現する方法 Dec 17, 2023 pm 05:50 PM

インターネット技術の継続的な発展に伴い、リアルタイムビデオストリーミングはインターネット分野における重要なアプリケーションとなっています。リアルタイムのビデオストリーミングを実現するための主要なテクノロジには、WebSocket と Java が含まれます。この記事では、WebSocket と Java を使用してリアルタイムのビデオストリーミング再生を実装する方法を紹介し、関連するコード例を示します。 1. WebSocket とは WebSocket は、単一の TCP 接続で全二重通信を行うためのプロトコルであり、Web 上で使用されます。

PHPとWebSocketを使ってリアルタイム通信を実現する方法 Dec 17, 2023 pm 10:24 PM

インターネット技術の継続的な発展により、リアルタイム通信は日常生活に欠かせないものになりました。 WebSocket テクノロジーを使用すると、効率的で低遅延のリアルタイム通信を実現できます。また、インターネット分野で最も広く使用されている開発言語の 1 つである PHP も、対応する WebSocket サポートを提供します。この記事では、PHP と WebSocket を使用してリアルタイム通信を実現する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は単一の

PHP と WebSocket: リアルタイムデータ転送のベストプラクティス Dec 18, 2023 pm 02:10 PM

PHP と WebSocket: リアルタイムデータ転送のベストプラクティス方法はじめに: Web アプリケーション開発では、リアルタイムデータ転送は非常に重要な技術要件です。従来の HTTP プロトコルは要求応答モデルのプロトコルであり、リアルタイムのデータ送信を効果的に実現できません。リアルタイムデータ送信のニーズを満たすために、WebSocket プロトコルが登場しました。 WebSocket は、単一の TCP 接続上で全二重通信を行う方法を提供する全二重通信プロトコルです。 Hと比べて

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

Java Websocket はオンラインホワイトボード機能をどのように実装しますか? Dec 17, 2023 pm 10:58 PM

JavaWebsocket はオンラインホワイトボード機能をどのように実装しますか?現代のインターネット時代では、人々はリアルタイムのコラボレーションと対話の経験にますます注目しています。オンラインホワイトボードは、Websocketをベースに実装された機能で、複数のユーザーがリアルタイムで共同作業して同じ描画ボードを編集し、描画や注釈などの操作を完了できるようにし、オンライン教育、リモート会議、チームコラボレーション、他のシナリオ。 1. 技術的背景 WebSocket は HTML5 で提供される新しいプロトコルです。

SSE と WebSocket Apr 17, 2024 pm 02:18 PM

この記事では、どちらも信頼できるデータ配信方法である Server Sent Events (SSE) と WebSocket を比較します。通信方向、基盤となるプロトコル、セキュリティ、使いやすさ、パフォーマンス、メッセージ構造、使いやすさ、テストツールを含む 8 つの側面で分析します。これらの側面の比較は次のように要約されます。カテゴリサーバー送信イベント (SSE) WebSocket の通信方向単方向双方向基礎となるプロトコル HTTP WebSocket プロトコルのセキュリティ HTTP と同じ既存のセキュリティの脆弱性使いやすさセットアップが簡単セットアップが複雑パフォーマンスが速いメッセージ送信速度が高いメッセージ処理の影響を受けるおよび接続管理メッセージ構造プレーンテキストまたはバイナリ使いやすさ広く利用可能 WebSocket の統合に役立つ

golang WebSocket プログラミングのヒント: 同時接続の処理 Dec 18, 2023 am 10:54 AM

Golang は強力なプログラミング言語であり、WebSocket プログラミングでの Golang の使用が開発者の間でますます評価されています。 WebSocket は、クライアントとサーバー間の双方向通信を可能にする TCP ベースのプロトコルです。この記事では、Golang を使用して、複数の同時接続を同時に処理する効率的な WebSocket サーバーを作成する方法を紹介します。テクニックを紹介する前に、まず WebSocket とは何かを学びましょう。 WebSocketWeb の概要

Java と WebSocket を使用してリアルタイムの株価プッシュを実装する方法 Dec 17, 2023 pm 09:15 PM

Java と WebSocket を使用してリアルタイム株価プッシュを実装する方法はじめに: インターネットの急速な発展に伴い、リアルタイム株価プッシュは投資家の注目の 1 つとなっています。従来の株式市場のプッシュ方式では、遅延が大きい、更新速度が遅いなどの問題があり、投資家にとって最新の株式市場情報をタイムリーに入手できないことは、投資判断の誤りにつながる可能性があります。 Java と WebSocket に基づくリアルタイムの株価プッシュはこの問題を効果的に解決し、投資家が最新の株価情報をできるだけ早く入手できるようにします。

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック