JavaScript を使用して DDE を実装する方法を調べる-フロントエンドQ&A-php.cn

DDE について理解する

DDE クライアントの実装

DDE サーバーの実装

测试示例

结论

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScript を使用して DDE を実装する方法を調べる

PHPz

Apr 25, 2023 am 10:48 AM

JavaScript は、主にフロントエンド Web ページにインタラクティブな機能を実装するために使用される一般的なスクリプト言語です。ただし、これを使用してさまざまな操作を実装したり、DDE (Dynamic Data Exchange) を実装したりすることもできます。

DDE は、Windows のアプリケーション間通信 (IPC) の方式です。 2 つ以上のプログラム間でデータを共有できるようになります。具体的には、ある Windows アプリケーションが別の Windows アプリケーション (通常は別の実行中のアプリケーション) にデータを渡すことができます。

この記事では、JavaScript を使用して DDE を実装する方法を検討します。始める前に、JavaScript と Windows の操作に関する基本的な知識があることを確認してください。

DDE について理解する

始める前に、DDE について簡単に理解しましょう。 DDE は、Windows の IPC (プロセス間通信) テクノロジです。これにより、アプリケーションはさまざまなメッセージやコマンドを送受信できるようになります。前に述べたように、あるアプリケーションが別のアプリケーションにデータを送信できるようになります。これは、「送信側」アプリケーションおよび「受信側」アプリケーションと呼ばれます。

DDE の機能を理解するには、次の 2 つの概念を理解する必要があります。

DDE クライアント: データを送信するアプリケーションです。
DDE サーバー: データを受信するために使用するアプリケーションです。

DDE クライアントは、DDE サーバーにデータを送信するとき、まずデータを DDE トランザクションにパッケージ化します。この DDE トランザクションには次のものが含まれます。

アプリケーション名
トピック名
アイテム名
操作タイプ (たとえば、開く、閉じる、送信など)
ステータス (成功または失敗)

DDE クライアントは DDE トランザクションを DDE サーバーに送信します。 DDE サーバーはトランザクションを受信すると、トランザクションを解析し、(必要な場合) データを抽出して、DDE クライアントに応答を送信します。

次に、JavaScript を使用して DDE を実装する方法を見てみましょう。

DDE クライアントの実装

JavaScript で DDE クライアントを実装するには、ActiveXObject オブジェクトを使用する必要があります。このオブジェクトは、Microsoft によって開発された「ActiveX コントロール」の一種で、Web 開発者が Windows の多くの操作を実行できるようにする共通の Windows コンポーネントを提供します。

次に、ActiveXObject オブジェクトを使用して DDE クライアントを作成します。

次は、JavaScript を使用して DDE クライアントを作成する方法を示す簡単な例です:

function sendDDEMessage(appName, topicName, itemName, command) {
  var ddeClient = new ActiveXObject("DDE.DdeClient");
  ddeClient.Connect(appName, topicName);

  var ddeTransaction = ddeClient.BeginTransaction();
  var ddeData = ddeTransaction.AddItem(itemName);
  ddeTransaction.SetData(ddeData, command);
  ddeTransaction.SetFormats(ddeData, 1); // 1 = CF_TEXT
  ddeTransaction.CommitTransaction();
  
  ddeClient.Disconnect();
}

ログイン後にコピー

上で示したように、sendDDEMessage 関数は 4 つのパラメーターを受け入れます:

appName: DDE サーバーのアプリケーション名が含まれます。
topicName: DDE サーバーコンテキストの名前が含まれます。
itemName: DDE サーバーアプリケーションでアクセスされるオブジェクトの名前が含まれます。
command: DDE サーバーに送信されるコマンドまたはメッセージ。

この関数は、最初に new ActiveXObject("DDE.DdeClient") を使用して DDE クライアントを作成します。次に、Connect() メソッドを使用して、クライアントを指定されたアプリケーションおよびトピックに接続します。

次に、DdeTransaction インスタンスを作成し、AddItem() メソッドを使用してアクセスする項目を追加します。次に、SetData() メソッドを使用して、DdeData インスタンスに送信されるコマンドまたはメッセージを設定します。最後に、SetFormats() メソッドを使用してデータ形式を設定します。ここでは 1 が使用され、CF_TEXT 形式を示します。

最後に、関数は CommitTransaction() メソッドを使用してトランザクションをコミットし、Disconnect() メソッドを使用してクライアントを DDE サーバーから切断します。

DDE サーバーの実装

DDE サーバーの実装は比較的複雑ですが、JavaScript と ActiveXObject オブジェクトを使用して簡単にシミュレートできます。

この例では、次の関数を使用して DDE サーバーをシミュレートします。

クライアントからコマンドを受信し、配列に保存できます。
「get_commands」という名前のコマンドを受信すると、returnCommandList() メソッドを使用して、以前に受信したすべてのコマンドを含む文字列を返します。

次は、DDE サーバーの JavaScript コードです:

function DDEServer(appName, topicName) {
  var self = this;
  self.appName = appName;
  self.topicName = topicName;
  self.commandList = [];

  self.connect = function() {
    self.ddeServer = new ActiveXObject("DDE.DdeServer");
    self.ddeServer.Register(appName, topicName);
  };

  self.disconnect = function() {
    self.ddeServer.Unregister();
  };

  self.handleTransaction = function(ddeTransaction) {
    var command = ddeTransaction.GetData(ddeTransaction.FirstItem);
    self.commandList.push(command);
  };

  self.returnCommandList = function() {
    return self.commandList.join('\r\n');
  };
}

ログイン後にコピー

上で示したように、DDEServer コンストラクターは 2 つのパラメーターを受け入れます: appName と topicName 、これらのパラメータは、DDE サーバーアプリケーションおよびトピックに接続するために使用されます。

connect() メソッドは new ActiveXObject("DDE.DdeServer") を使用します。DDE サーバーを作成し、Register() メソッドを使用します。指定されたアプリケーションとテーマの下でそれを実行します。

disconnect() メソッドは、Unregister() メソッドを使用して DDE サーバーの登録を解除します。

DDE サーバーがトランザクションを受信すると、handleTransaction() メソッドが呼び出されます。トランザクションからデータをフェッチし、サーバー側のコマンドリストに追加します。

最後に、サーバーが「get_commands」という名前のコマンドを受信すると、returnCommandList() メソッドは join() メソッドを使用して、コマンドリストコマンドは文字列に連結されて返されます。

测试示例

现在我们已经开始实现 DDE 客户端和服务端，让我们来看看一些示例。为了测试客户端和服务端，我们将创建一个简单的 HTML 页面，该页面包含两个文本框和两个按钮。第一个文本框将用于输入命令，第二个文本框将用于显示服务器端的响应。

在按钮上单击时，客户端将尝试连接到服务器端，并将命令发送到它。一旦服务器端接收到命令，它将保存它，并返回一个包含所有已接收到的命令的字符串。

以下是示例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DDE Client Demo</title>
  </head>
  <body>
    <h1>DDE Client Demo</h1>
    <label for="command">Enter a command:</label>
    <input id="command" type="text">
    <button id="sendCommand">Send Command</button>
    <br>
    <label for="output">Output:</label>
    <textarea id="output"></textarea>
    <script>
      var ddeServer = new DDEServer("dde_demo", "demo_topic");
      ddeServer.connect();

      function sendCommand() {
        var command = document.getElementById("command").value;
        sendDDEMessage("dde_demo", "demo_topic", "command", command);
        var output = document.getElementById("output");
        output.value = sendDDEMessage("dde_demo", "demo_topic", "get_commands", "");
      }

      document.getElementById("sendCommand").addEventListener("click", sendCommand);
    </script>
  </body>
</html>

ログイン後にコピー

如上所示，我们使用了 var ddeServer = new DDEServer("dde_demo", "demo_topic") 创建了一个 DDE 服务端，并使用 ddeServer.connect() 连接到它。

我们还定义了 sendCommand() 函数，该函数将获取命令并使用 sendDDEMessage() 函数将其发送到 DDE 服务端。然后，它将获取 DDE 服务端的响应并将其设置为第二个文本框中的值。

最后，我们监听按钮上的单击事件，并在单击时调用 sendCommand() 函数。