广告
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，特别适合实时应用。本文将详细介绍如何在 HarmonyOS 中使用 WebSocket，包括如何连接到服务器、发送和接收数据。
实现效果
在应用中，用户可以输入服务器的 IP 地址并进行连接。一旦连接成功，用户可以发送和接收消息。连接状态通过按钮颜色的变化进行指示：灰色表示未连接，绿色表示已连接。
相关权限
在你的 module 配置文件中，需要声明以下权限：
"reqPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]相关依赖
需要有一个 WebSocket 服务器来实现相关功能。你可以使用现有的 WebSocket 服务器，或者自己搭建一个 WebSocket 服务器。
示例代码
创建 WebSocket 客户端
- 创建 WebSocket 对象并连接到服务器。
import WebSocket from '@ohos.net.webSocket';
let webSocket = null;
const serverIp = "ws://yourserverip:port"; // 替换为实际的服务器 IP 和端口
// 创建 WebSocket 对象并设置事件处理函数
function createWebSocket() {
webSocket = new WebSocket(serverIp);
// 当 WebSocket 连接打开时调用
webSocket.onopen = () => {
console.log('WebSocket connection opened');
updateConnectionStatus(true);
};
// 当 WebSocket 连接关闭时调用
webSocket.onclose = () => {
console.log('WebSocket connection closed');
updateConnectionStatus(false);
};
// 当收到消息时调用
webSocket.onmessage = (event) => {
console.log('Received message: ', event.data);
displayMessage(event.data);
};
// 当 WebSocket 出现错误时调用
webSocket.onerror = (error) => {
console.error('WebSocket error: ', error);
updateConnectionStatus(false);
};
}
// 连接到 WebSocket 服务器
function connectWebSocket() {
if (!webSocket || webSocket.readyState !== WebSocket.OPEN) {
createWebSocket();
}
}
// 断开 WebSocket 连接
function disconnectWebSocket() {
if (webSocket) {
webSocket.close();
}
}
// 发送消息到 WebSocket 服务器
function sendMessage(message) {
if (webSocket && webSocket.readyState === WebSocket.OPEN) {
webSocket.send(message);
} else {
console.error('WebSocket is not open. Cannot send message.');
}
}
// 更新连接状态
function updateConnectionStatus(isConnected) {
const connectionButton = document.getElementById('connectionButton');
if (isConnected) {
connectionButton.style.backgroundColor = 'green';
} else {
connectionButton.style.backgroundColor = 'grey';
}
}
// 显示收到的消息
function displayMessage(message) {
const messageDisplay = document.getElementById('messageDisplay');
const newMessage = document.createElement('div');
newMessage.textContent = message;
messageDisplay.appendChild(newMessage);
}创建用户界面
- 创建一个简单的用户界面，用于输入服务器 IP 地址，连接和断开连接，以及发送和接收消息。
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Example</title>
</head>
<body>
<!-- 输入服务器 IP 地址并绑定 -->
<div>
<input type="text" id="serverIpInput" placeholder="Enter server IP"/>
<button onclick="bindServerIp()">Bind Server IP</button>
</div>
<!-- 连接和断开 WebSocket 连接 -->
<div>
<button id="connectionButton" style="background-color: grey;" onclick="connectWebSocket()">Connect</button>
<button onclick="disconnectWebSocket()">Disconnect</button>
</div>
<!-- 输入消息并发送 -->
<div>
<input type="text" id="messageInput" placeholder="Enter message"/>
<button onclick="sendMessage(document.getElementById('messageInput').value)">Send Message</button>
</div>
<!-- 显示收到的消息 -->
<div id="messageDisplay"></div>
<script>
let serverIp = '';
// 绑定服务器 IP 地址
function bindServerIp() {
serverIp = document.getElementById('serverIpInput').value;
alert('Server IP bound:' + serverIp);
}
// 连接到 WebSocket 服务器
function connectWebSocket() {
if (serverIp) {
createWebSocket();
} else {
alert('Please bind a server IP first.');
}
}
// 断开 WebSocket 连接
function disconnectWebSocket() {
if (webSocket) {
webSocket.close();
}
}
// 发送消息到 WebSocket 服务器
function sendMessage(message) {
if (webSocket && webSocket.readyState === WebSocket.OPEN) {
webSocket.send(message);
} else {
alert('WebSocket is not open.');
}
}
// 创建 WebSocket 对象并设置事件处理函数
function createWebSocket() {
webSocket = new WebSocket(serverIp);
// 当 WebSocket 连接打开时调用
webSocket.onopen = () => {
console.log('WebSocket connection opened');
updateConnectionStatus(true);
};
// 当 WebSocket 连接关闭时调用
webSocket.onclose = () => {
console.log('WebSocket connection closed');
updateConnectionStatus(false);
};
// 当收到消息时调用
webSocket.onmessage = (event) => {
console.log('Received message: ', event.data);
displayMessage(event.data);
};
// 当 WebSocket 出现错误时调用
webSocket.onerror = (error) => {
console.error('WebSocket error: ', error);
updateConnectionStatus(false);
};
}
// 更新连接状态按钮的颜色
function updateConnectionStatus(isConnected) {
const connectionButton = document.getElementById('connectionButton');
if (isConnected) {
connectionButton.style.backgroundColor = 'green';
} else {
connectionButton.style.backgroundColor = 'grey';
}
}
// 显示收到的消息
function displayMessage(message) {
const messageDisplay = document.getElementById('messageDisplay');
const newMessage = document.createElement('div');
newMessage.textContent = message;
messageDisplay.appendChild(newMessage);
}
</script>
</body>
</html>通过以上代码，你可以在 HarmonyOS 中实现基本的 WebSocket 客户端功能，包括连接到服务器、发送和接收消息。