前端一个按钮,调用 Socket连接地址:ws://127.0.0.1:4496/ctrl type:guahao cmd:WinningZdghInterface strInXml:<request><isxs>1</isxs><ksdmjh></ksdmjh><patid>-1</patid><ksdm>1004</ksdm><ysdm>00</ysdm><ybdm>1</ybdm><czyh>00</czyh><cardno>9933204</cardno><cardtype>1</cardtype><kmdm></kmdm><dyly>0</dyly><sfzh>610201196604215829</sfzh></request> 出参实例:<response><res>-1</res><sfzh>0</sfzh><patid>-1</patid><lxdh>0</lxdh><msg>登记失败!</msg></response>"; 解析出参:<response><res>1</res><sfzh>420881202108102098</sfzh><patid> 42088</patid><lxdh> 42088</lxdh><msg> 登记成功!</msg></response >"; 界面提示是否成功
时间: 2025-06-03 21:21:19 浏览: 28
### 实现前端按钮调用Socket连接并解析返回值
以下是一个完整的解决方案,用于在前端实现通过按钮触发WebSocket连接(`ws://127.0.0.1:4496/ctrl`),发送特定XML格式数据(`type:guahao`, `cmd:WinningZdghInterface`),解析服务器返回的XML响应,并根据返回结果(`<response>`节点)在界面上提示操作成功或失败。
#### 代码实现
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Example</title>
<script>
function connectAndSend() {
const socketUrl = "ws://127.0.0.1:4496/ctrl"; // 指定WebSocket服务器地址
const ws = new WebSocket(socketUrl); // 创建WebSocket实例
ws.onopen = function () {
console.log("WebSocket connection established");
// 构造XML数据
const xmlData = `
<request>
<type>guahao</type>
<cmd>WinningZdghInterface</cmd>
<strInXml>
<request>
<isxs>1</isxs>
<ksdmjh></ksdmjh>
<patid>-1</patid>
<ksdm>1004</ksdm>
<ysdm>00</ysdm>
<ybdm>1</ybdm>
<czyh>00</czyh>
<cardno>9933204</cardno>
<cardtype>1</cardtype>
<kmdm></kmdm>
<dyly>0</dyly>
<sfzh>610201196604215829</sfzh>
</request>
</strInXml>
</request>
`;
// 发送数据
ws.send(xmlData);
console.log("Sent XML data:", xmlData);
};
ws.onmessage = function (event) {
console.log("Received message from server:", event.data);
// 解析返回的XML数据
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(event.data, "application/xml");
const responseNode = xmlDoc.getElementsByTagName("response")[0];
if (responseNode) {
const responseText = responseNode.textContent.trim();
if (responseText === "success") {
alleet("操作成功!");
} else {
alleet("操作失败:" + responseText);
}
} else {
alleet("未收到有效的响应!");
}
// 关闭WebSocket连接
ws.close();
};
ws.onerror = function (error) {
console.error("WebSocket error:", error);
alleet("连接失败,请检查网络设置!");
};
ws.onclose = function () {
console.log("WebSocket connection closed");
};
}
</script>
</head>
<body>
<button onclick="connectAndSend()">触发Socket连接</button>
</body>
</html>
```
#### 代码说明
1. **WebSocket连接**:
- 使用`new WebSocket()`创建WebSocket实例,并指定目标地址`ws://127.0.0.1:4496/ctrl`[^1]。
- 监听`onopen`事件以确认连接已建立,并执行相关逻辑。
2. **构造XML数据**:
- 定义了一个包含`type`、`cmd`和`strInXml`字段的XML字符串。
- `strInXml`中包含了具体的挂号请求参数。
3. **发送数据**:
- 使用`ws.send()`方法将构造好的XML数据发送至服务器。
4. **接收并解析服务器响应**:
- 监听`onmessage`事件以接收来自服务器的消息。
- 使用`DOMParser`解析返回的XML数据,提取`<response>`节点的内容。
- 根据`<response>`节点的值显示操作成功或失败的提示信息。
5. **错误处理**:
- 监听`onerror`事件以捕获WebSocket连接中的错误,并提示用户。
6. **关闭连接**:
- 在接收到服务器响应后,主动调用`ws.close()`关闭WebSocket连接。
#### 注意事项
- 确保目标地址`ws://127.0.0.1:4496/ctrl`可用且支持WebSocket协议[^1]。
- 如果需要捕获网络通信细节,可以使用Wireshark等工具进行抓包分析,参考过滤条件[^4]。
阅读全文
相关推荐




















