WebSocket 是 HTML5 提供的一种新的网络协议，可以在浏览器和服务器之间建立双向的实时通信，可以用于实现在线游戏、聊天室、股票行情等实时应用。下面是使用 HTML5 WebSocket 的教程：
- 创建 WebSocket 对象
使用 WebSocket 需要先创建 WebSocket 对象。创建 WebSocket 对象的语法如下：
var ws = new WebSocket(url);
其中，url 是 WebSocket 服务器的地址，可以是相对路径或绝对路径。例如：
var ws = new WebSocket("ws://localhost:8080/chat");
- WebSocket 事件
WebSocket 对象支持多个事件，用于处理连接状态、接收消息等。常用的事件有以下几个：
onopen: 连接建立时触发onmessage: 接收到消息时触发onerror: 发生错误时触发onclose: 连接关闭时触发
例如，可以使用以下代码处理连接建立时的事件：
ws.onopen = function() {
console.log("WebSocket connected.");
};
- 发送消息
使用 WebSocket 发送消息需要调用 send() 方法。例如，可以使用以下代码发送消息：
ws.send("Hello, WebSocket!");
- 接收消息
WebSocket 接收到消息时会触发 onmessage 事件，可以使用以下代码处理接收到消息的事件：
ws.onmessage = function(event) {
console.log("Received message: " + event.data);
};
其中，event.data 是接收到的消息。
- 关闭连接
可以使用 close() 方法关闭 WebSocket 连接。例如，可以使用以下代码关闭连接：
ws.close();
完整的 HTML5 WebSocket 示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Test</title>
<script>
var ws = new WebSocket("ws://localhost:8080/chat");
ws.onopen = function() {
console.log("WebSocket connected.");
};
ws.onmessage = function(event) {
console.log("Received message: " + event.data);
};
ws.onclose = function() {
console.log("WebSocket closed.");
};
ws.onerror = function() {
console.log("WebSocket error.");
};
function send() {
var message = document.getElementById("message").value;
ws.send(message);
}
function close() {
ws.close();
}
</script>
</head>
<body>
<input type="text" id="message">
<button onclick="send()">Send</button>
<button onclick="close()">Close</button>
</body>
</html>
以上是使用 HTML5 WebSocket 的教程，需要注意的是，WebSocket 需要浏览器和服务器均支持 WebSocket 协议才能正常使用。
评论