Table of Contents
Understanding DDE
Implementing the DDE client
Implementing the DDE server
测试示例
结论
Home Web Front-end Front-end Q&A Explore how to implement DDE using JavaScript

Explore how to implement DDE using JavaScript

Apr 25, 2023 am 10:48 AM

JavaScript is a general scripting language mainly used to implement interactive functions in front-end web pages. However, we can also use it to implement a variety of operations, and even use it to implement DDE (Dynamic Data Exchange).

DDE is a method of Windows inter-application communication (IPC). It allows data to be shared between two or more programs. Specifically, it allows one Windows application to pass data to another, typically another running application.

In this article, we will explore how to implement DDE using JavaScript. Before you begin, make sure you have basic knowledge of working with JavaScript and Windows.

Understanding DDE

Before we begin, let’s briefly understand DDE. DDE is an IPC (Inter-Process Communication) technology in Windows. It allows applications to send and receive various messages and commands. As we mentioned earlier, it allows one application to send data to another application. This is called the "sender" application and the "receiver" application.

To understand the functions of DDE, you need to understand the following two concepts:

  • DDE Client: It is the application through which we send data.
  • DDE Server: It is the application that we use to receive data.

When the DDE client sends data to the DDE server, it first packages the data into a DDE transaction. This DDE transaction includes the following:

  • Application name
  • Topic name
  • Item name
  • Operation type (for example, open, close, Send, etc.)
  • Status (success or failure)

The DDE client sends the DDE transaction to the DDE server. When the DDE server receives a transaction, it parses the transaction, extracts the data (if needed) and sends a response to the DDE client.

Now, let’s see how to implement DDE using JavaScript.

Implementing the DDE client

Implementing the DDE client in JavaScript requires the use of ActiveXObject objects. This object is a type of "ActiveX control" developed by Microsoft that provides common Windows components that allow Web developers to perform many Windows operations.

Next, we will use the ActiveXObject object to create a DDE client.

The following is a simple example demonstrating how to create a DDE client using JavaScript:

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();
}
Copy after login

As shown above, the sendDDEMessage function accepts four parameters:

  • appName: Contains the application name of the DDE server.
  • topicName: Contains the name of the DDE server context.
  • itemName: Contains the name of the object to be accessed in the DDE server application.
  • command: The command or message to be sent to the DDE server.

This function first uses new ActiveXObject("DDE.DdeClient") to create a DDE client. Next, it uses the Connect() method to connect the client to the specified application and topic.

Next, it creates a DdeTransaction instance and adds the item to be accessed using the AddItem() method. Then, use the SetData() method to set the command or message to be sent into the DdeData instance. Finally, use the SetFormats() method to set the data format. 1 is used here, indicating the CF_TEXT format.

Finally, the function uses the CommitTransaction() method to commit the transaction and the Disconnect() method to disconnect the client from the DDE server.

Implementing the DDE server

Although the implementation of the DDE server is relatively complex, we can easily simulate it using JavaScript and ActiveXObject objects.

In this example, we will simulate a DDE server with the following functions:

  • It can receive commands from the client and save them in an array.
  • When it receives a command named "get_commands", it will use the returnCommandList() method to return a string containing all previously received commands.

The following is the JavaScript code of the DDE server:

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');
  };
}
Copy after login

As shown above, the DDEServer constructor accepts two parameters: appName and topicName, these parameters are used to connect to the DDE server application and topic.

connect() method uses new ActiveXObject("DDE.DdeServer") Create a DDE server and use the Register() method Register it under the specified application and theme. The

disconnect() method uses the Unregister() method to unregister the DDE server.

When the DDE server receives the transaction, the handleTransaction() method is called. It fetches the data from the transaction and adds it to the server-side command list.

Finally, when the server receives the command named "get_commands", the returnCommandList() method will use the join() method to join all the commands in the command list The command is concatenated into a string and returned.

测试示例

现在我们已经开始实现 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>
Copy after login

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

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

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

结论

在本文中,我们了解了什么是 DDE 和如何使用 JavaScript 和 ActiveXObject 对象实现它。虽然这种方法不是最佳的,但它可以让我们学习如何在 JavaScript 中使用 ActiveXObject 对象和 Windows API,以及如何进行应用程序和操作系统级别的操作。

The above is the detailed content of Explore how to implement DDE using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

React's Role in HTML: Enhancing User Experience React's Role in HTML: Enhancing User Experience Apr 09, 2025 am 12:11 AM

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

What are the limitations of Vue 2's reactivity system with regard to array and object changes? What are the limitations of Vue 2's reactivity system with regard to array and object changes? Mar 25, 2025 pm 02:07 PM

Vue 2's reactivity system struggles with direct array index setting, length modification, and object property addition/deletion. Developers can use Vue's mutation methods and Vue.set() to ensure reactivity.

React Components: Creating Reusable Elements in HTML React Components: Creating Reusable Elements in HTML Apr 08, 2025 pm 05:53 PM

React components can be defined by functions or classes, encapsulating UI logic and accepting input data through props. 1) Define components: Use functions or classes to return React elements. 2) Rendering component: React calls render method or executes function component. 3) Multiplexing components: pass data through props to build a complex UI. The lifecycle approach of components allows logic to be executed at different stages, improving development efficiency and code maintainability.

What are the benefits of using TypeScript with React? What are the benefits of using TypeScript with React? Mar 27, 2025 pm 05:43 PM

TypeScript enhances React development by providing type safety, improving code quality, and offering better IDE support, thus reducing errors and improving maintainability.

React and the Frontend: Building Interactive Experiences React and the Frontend: Building Interactive Experiences Apr 11, 2025 am 12:02 AM

React is the preferred tool for building interactive front-end experiences. 1) React simplifies UI development through componentization and virtual DOM. 2) Components are divided into function components and class components. Function components are simpler and class components provide more life cycle methods. 3) The working principle of React relies on virtual DOM and reconciliation algorithm to improve performance. 4) State management uses useState or this.state, and life cycle methods such as componentDidMount are used for specific logic. 5) Basic usage includes creating components and managing state, and advanced usage involves custom hooks and performance optimization. 6) Common errors include improper status updates and performance issues, debugging skills include using ReactDevTools and Excellent

How can you use useReducer for complex state management? How can you use useReducer for complex state management? Mar 26, 2025 pm 06:29 PM

The article explains using useReducer for complex state management in React, detailing its benefits over useState and how to integrate it with useEffect for side effects.

What are functional components in Vue.js? When are they useful? What are functional components in Vue.js? When are they useful? Mar 25, 2025 pm 01:54 PM

Functional components in Vue.js are stateless, lightweight, and lack lifecycle hooks, ideal for rendering pure data and optimizing performance. They differ from stateful components by not having state or reactivity, using render functions directly, a

How do you ensure that your React components are accessible? What tools can you use? How do you ensure that your React components are accessible? What tools can you use? Mar 27, 2025 pm 05:41 PM

The article discusses strategies and tools for ensuring React components are accessible, focusing on semantic HTML, ARIA attributes, keyboard navigation, and color contrast. It recommends using tools like eslint-plugin-jsx-a11y and axe-core for testi

See all articles