易语言WebSocket服务器如何与网页通信？-网页设计-锦华智联科技

核心概念：了解 WebSocket 和易语言相关的知识。
准备工作：下载和安装必要的易语言模块。
服务器端（易语言）开发：创建一个简单的 WebSocket 服务器,能接收和发送消息。
客户端（网页）开发：创建一个 HTML 页面，通过 JavaScript 连接易语言服务器并发送消息。
测试与运行：启动服务器,打开网页进行测试。

核心概念

什么是 WebSocket？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它使得客户端（浏览器）和服务器之间可以快速、实时地进行数据交换，而不需要像传统 HTTP 那样每次通信都重新建立连接。

（图片来源网络，侵删）

HTTP vs WebSocket:
- HTTP: 请求-响应模式，客户端发起请求，服务器响应后连接就关闭了，如果要持续通信，需要客户端不断轮询（Polling）,效率低下。
- WebSocket: 全双工模式，一旦连接建立，客户端和服务器就可以随时主动向对方发送消息，延迟极低,非常适合实时应用。

易语言的 WebSocket 实现

易语言本身不直接支持 WebSocket 协议，因此我们需要借助第三方模块，目前最流行和功能最强大的模块是 “易语言·超级模块”，它内置了完整的 WebSocket 服务器和客户端功能。

准备工作

你需要下载并安装 “易语言·超级模块”。

下载地址：你可以在易语言的官方论坛或一些易语言资源网站找到，搜索“易语言超级模块”即可。
安装：下载后解压，将 超级模块.ec 文件复制到你的易语言安装目录下的 ..\程序目录\组件 文件夹中。
创建新程序：
- 打开易语言，新建一个“Windows 窗口程序”。
- 在“组件”面板中，你应该能看到“超级模块”并可以将其添加到你的程序中。

服务器端（易语言）开发

我们的目标是创建一个服务器，监听指定端口，当有网页连接时，能接收消息并回复,同时也能主动向网页推送消息。

步骤 3.1：设计窗口界面

创建一个窗口,并添加以下控件：

（图片来源网络，侵删）

按钮：启动服务器，用于启动 WebSocket 服务。
按钮：停止服务器,用于关闭服务。
编辑框：服务器状态,用于显示服务器是否运行以及连接信息。
编辑框：接收消息框,用于显示从网页客户端收到的消息。
编辑框：发送消息框,用于输入要发送给网页的消息。
按钮：发送消息，点击后将 发送消息框 中的内容发送给所有已连接的客户端。
列表框：客户端列表,用于显示所有连接到服务器的客户端信息。

步骤 3.2：编写核心代码

双击“启动服务器”按钮,编写如下代码：

.版本 2
.程序集 窗口程序集_启动窗口
.子程序 __启动服务器_被单击
.局部变量 ws, websocket服务器
' 创建一个 WebSocket 服务器对象
ws ＝ 创建 (websocket服务器)
' 设置服务器监听的 IP 和端口
' "0.0.0.0" 表示监听所有网络接口
' "8080" 是端口号，确保这个端口没有被其他程序占用
.(ws.创建 ("0.0.0.0", 8080))
    ' 如果创建成功
    信息框 ("服务器启动成功！端口：8080", 0, , )
    ' 将服务器对象赋值给一个全局变量，以便在其他子程序中使用
    全局_WebSocket服务器 ＝ ws
    ' 更新状态
    编辑框_服务器状态.内容 ＝ "服务器运行中，监听端口 8080"
.否则
    ' 如果创建失败（例如端口被占用）
    信息框 ("服务器启动失败！请检查端口是否被占用。", 0, , )
    编辑框_服务器状态.内容 ＝ "服务器启动失败"
.如果结束
' 注册事件处理子程序
' 这是超级模块的关键，当特定事件发生时，会自动调用我们定义的子程序
ws.事件_连接 ＝ 连接事件
ws.事件.断开 ＝ 断开事件
ws.事件.收到文本 ＝ 收到文本事件
ws.事件.收到字节 ＝ 收到字节事件

代码解释：

创建 (websocket服务器): 创建一个 WebSocket 服务器实例。
ws.创建 ("0.0.0.0", 8080): 尝试在指定 IP 和端口上启动服务。
全局_WebSocket服务器: 我们定义一个全局变量来保存这个服务器对象，这样“停止服务器”按钮和“发送消息”按钮才能访问到它。
ws.事件_连接＝连接事件: 这是最重要的部分，它告诉服务器：当有新客户端连接时，请自动执行我程序里名为“连接事件”的子程序,其他事件同理。

步骤 3.3：编写事件处理子程序

在代码窗口的空白处，右键选择“插入” -> “子程序”，然后创建以下四个子程序。子程序名称必须和上面注册的完全一样。

连接事件 (当有新客户端连接时触发)

（图片来源网络，侵删）

.版本 2
.子程序 连接事件
.参数 发送者, 对象型
.参数 客户端标识, 文本型
.参数 客户端IP, 文本型
.参数 客户端端口, 整数型
' 在列表框中添加新连接的客户端信息
列表框_客户端列表.加入项目 (客户端IP ＋ ":" ＋ 到文本 (客户端端口))
' 在状态框中显示信息
编辑框_服务器状态.内容 ＝ "客户端 [" ＋ 客户端IP ＋ "] 已连接"

断开事件 (当有客户端断开连接时触发)

.版本 2
.子程序 断开事件
.参数 发送者, 对象型
.参数 客户端标识, 文本型
.参数 客户端IP, 文本型
.参数 客户端端口, 整数型
' 从列表框中移除断开的客户端
' 注意：这里需要根据IP和端口来删除，简单起见，我们只删除最后一个匹配的项
列表框_客户端列表.删除项目 (列表框_客户端列表.取项目数 () － 1)
' 更新状态
编辑框_服务器状态.内容 ＝ "客户端 [" ＋ 客户端IP ＋ "] 已断开"

收到文本事件 (当收到客户端发来的文本消息时触发)

.版本 2
.子程序 收到文本事件
.参数 发送者, 对象型
.参数 客户端标识, 文本型
.参数 客户端IP, 文本型
.参数 客户端端口, 整数型 文本型
' 将收到的消息追加到接收消息框
编辑框_接收消息框.内容 ＝ 编辑框_接收消息框.内容 ＋ "[来自 " ＋ 客户端IP ＋ "]: " ＋ 内容 ＋ #换行符

收到字节事件 (当收到客户端发来的二进制数据时触发)

.版本 2
.子程序 收到字节事件
.参数 发送者, 对象型
.参数 客户端标识, 文本型
.参数 客户端IP, 文本型
.参数 客户端端口, 整数型 字节集
' 我们这里主要处理文本，所以可以忽略或简单提示
' 编辑框_接收消息框.内容 ＝ 编辑框_接收消息框.内容 ＋ "[来自 " ＋ 客户端IP ＋ "]: 收到二进制数据" ＋ #换行符

步骤 3.4：编写其他按钮代码

“停止服务器”按钮代码：

.版本 2
.子程序 __停止服务器_被单击
.(全局_WebSocket服务器 ≠ null)
    ' 关闭服务器
    全局_WebSocket服务器.关闭 ()
    ' 清空全局变量
    全局_WebSocket服务器 ＝ null
    ' 清空列表框和状态框
    列表框_客户端列表.清空 ()
    编辑框_服务器状态.内容 ＝ "服务器已停止"
    信息框 ("服务器已停止", 0, , )
.否则
    信息框 ("服务器未运行", 0, , )
.如果结束

“发送消息”按钮代码：

.版本 2
.子程序 __发送消息_被单击
.局部变量 msg, 文本型
.(全局_WebSocket服务器 ≠ null)
    msg ＝ 编辑框_发送消息框.内容
    .(msg ≠ "")
        ' 向所有已连接的客户端广播消息
        全局_WebSocket服务器.发送文本 (msg)
        ' 同时在服务器端也显示一下，方便调试
        编辑框_接收消息框.内容 ＝ 编辑框_接收消息框.内容 ＋ "[服务器广播]: " ＋ msg ＋ #换行符
    .否则
        信息框 ("发送内容不能为空", 0, , )
    .如果结束
.否则
    信息框 ("请先启动服务器", 0, , )
.如果结束

客户端（网页）开发

网页客户端使用原生的 JavaScript WebSocket API 就可以非常方便地与我们的易语言服务器通信。

创建一个名为 index.html 的文件,内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">WebSocket 客户端</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        #messages { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: scroll; margin-bottom: 10px; }
        #inputMessage { width: 80%; padding: 8px; }
        #sendButton { padding: 8px 15px; }
    </style>
</head>
<body>
    <h1>易语言 WebSocket 客户端</h1>
    <div id="messages"></div>
    <input type="text" id="inputMessage" placeholder="输入消息...">
    <button id="sendButton">发送</button>
    <script>
        // 获取DOM元素
        const messagesDiv = document.getElementById('messages');
        const inputMessage = document.getElementById('inputMessage');
        const sendButton = document.getElementById('sendButton');
        // --- 核心代码：创建 WebSocket 连接 ---
        // 注意：这里的 IP 地址和端口必须与易语言服务器的一致。
        // 如果易语言和网页在同一个电脑上，可以使用 "ws://localhost:8080"
        // 如果在不同电脑上，请使用服务器的局域网 IP，如 "ws://192.168.1.100:8080"
        const ws = new WebSocket('ws://localhost:8080');
        // --- WebSocket 事件处理 ---
        // 1. 连接已打开
        ws.onopen = function(event) {
            console.log('WebSocket 连接已成功建立！');
            appendMessage('【系统】已连接到服务器。');
        };
        // 2. 收到服务器消息
        ws.onmessage = function(event) {
            console.log('收到服务器消息:', event.data);
            appendMessage('【服务器】' + event.data);
        };
        // 3. 连接已关闭
        ws.onclose = function(event) {
            console.log('WebSocket 连接已关闭。');
            appendMessage('【系统】与服务器连接已断开。');
        };
        // 4. 发生错误
        ws.onerror = function(error) {
            console.error('WebSocket 发生错误:', error);
            appendMessage('【错误】与服务器通信时发生错误。');
        };
        // --- 发送消息功能 ---
        function sendMessage() {
            const message = inputMessage.value.trim();
            if (message) {
                ws.send(message); // 通过 WebSocket 发送消息
                appendMessage('【我】' + message);
                inputMessage.value = ''; // 清空输入框
            }
        }
        // 将消息添加到消息区域
        function appendMessage(message) {
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            messagesDiv.appendChild(messageElement);
            messagesDiv.scrollTop = messagesDiv.scrollHeight; // 自动滚动到底部
        }
        // 绑定发送按钮的点击事件
        sendButton.addEventListener('click', sendMessage);
        // 绑定输入框的回车键事件
        inputMessage.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>

代码解释：

new WebSocket('ws://localhost:8080'): 创建一个指向易语言服务器的连接。
ws.onopen, ws.onmessage, ws.onclose, ws.onerror: 分别处理连接成功、收到消息、连接关闭和发生错误这四个核心事件。
ws.send(message): 向服务器发送文本消息。

测试与运行

启动易语言服务器：
- 在易语言中编译并运行你创建的服务器程序。
- 点击“启动服务器”按钮，你应该会看到“服务器启动成功！”的提示，服务器状态”框会更新。
打开网页客户端：
- 用浏览器（如 Chrome, Edge）打开你创建的 index.html 文件。
- 重要提示：由于浏览器的安全策略，直接用 file:// 协议打开 HTML 文件可能会无法连接 ws://localhost，最简单的方法是使用一个本地 Web 服务器来托管 index.html。
  - 方法一（推荐）：如果你安装了 Visual Studio Code，可以安装 "Live Server" 插件，右键点击 index.html 选择 "Open with Live Server"，它会自动在 http://127.0.0.1:5500 这样的地址下打开你的文件。
  - 方法二：使用 Python，如果你的电脑安装了 Python 3，在 index.html 所在的文件夹打开命令行，运行 python -m http.server 8081，然后在浏览器中访问 http://localhost:8081/index.html。
观察交互：
- 网页加载后，你应该在网页的控制台和消息区域看到“已连接到服务器”的提示。
- 易语言服务器的“客户端列表”中会出现一个条目，“服务器状态”框也会更新。
- 在网页的输入框中输入文字，点击“发送”或按回车。
- 网页端：消息会显示在页面的消息区域。
- 易语言端：消息会出现在“接收消息框”中。
- 反向测试：在易语言的“发送消息框”中输入文字，点击“发送消息”按钮。
- 网页端：消息会立即出现在页面的消息区域。

至此，你已经成功实现了易语言 WebSocket 服务器与网页的双向实时通信！你可以基于这个框架，开发出更复杂的应用，比如多人聊天室、实时股票行情推送、在线协作白板等。