带你认识HTML5中的WebSocket

认识HTML5中的WebSocket

WebSocket是一种在单个TCP连接上实现双向通信的协议。WebSocket在HTML5中引入，并已成为Web开发的重要组成部分。下面将介绍WebSocket的使用以及实现的示例。

WebSocket的使用

基本属性

WebSocket用于建立浏览器与服务器之间的双向通信。以下是WebSocket对象的基本属性：

• WebSocket.readyState：WebSocket的状态，可选的值为0-3。
• WebSocket.bufferedAmount：已经被send()方法放入发送缓存队列中的字符数。

基本方法

WebSocket对象包含以下基本方法：

• WebSocket()：构造函数，用于创建WebSocket对象。
• WebSocket.send()：向服务器发送数据。
• WebSocket.close()：关闭WebSocket连接。
• WebSocket.onerror：当WebSocket对象发生错误时执行此方法。
• WebSocket.onopen：当WebSocket连接打开时调用此方法。
• WebSocket.onmessage：当从服务器接收到数据时调用此方法。
• WebSocket.onclose：当WebSocket连接关闭时调用此方法。

示例1

以下是一个创建WebSocket对象的示例：

// 创建WebSocket对象
var ws = new WebSocket("ws://localhost:8080/echo");

// 当WebSocket连接打开时执行此方法
ws.onopen = function() {
    console.log("连接已打开");
};

// 当收到服务器发送的消息时执行此方法
ws.onmessage = function(event) {
    console.log("收到消息: ", event.data);
};

// 当WebSocket连接关闭时执行此方法
ws.onclose = function() {
    console.log("连接已关闭");
};

// 当发生错误时执行此方法
ws.onerror = function() {
    console.log("发生错误");
};

示例2

以下示例演示了如何向服务器发送数据并接收回复：

// 创建WebSocket对象
var ws = new WebSocket("ws://localhost:8080/echo");

// 当WebSocket连接打开时执行此方法
ws.onopen = function() {
    // 向服务器发送数据
    ws.send("Hello World!");
};

// 当收到服务器发送的消息时执行此方法
ws.onmessage = function(event) {
    console.log("收到消息: ", event.data);
    // 关闭WebSocket连接
    ws.close();
};

// 当WebSocket连接关闭时执行此方法
ws.onclose = function() {
    console.log("连接已关闭");
};

// 当发生错误时执行此方法
ws.onerror = function() {
    console.log("发生错误");
};

WebSocket的实现

以下是一个Java实现WebSocket服务器的示例：

示例1

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/echo")
public class EchoServer {

    @OnOpen
    public void onOpen(Session session) {
        System.out.println("连接已打开");
    }

    @OnMessage
    public void onMessage(Session session, String message) {
        System.out.println("收到消息: " + message);
        // 向客户端发送相同的消息
        try {
            session.getBasicRemote().sendText(message);
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println("连接已关闭");
    }
}

示例2

以下是一个Node.js实现WebSocket服务器的示例：

var WebSocketServer = require('ws').Server;
var server = new WebSocketServer({ port: 8080 });

server.on('connection', function(ws) {

    console.log('连接已打开');

    ws.on('message', function(message) {
        console.log('收到消息: %s', message);
        // 向客户端发送相同的消息
        ws.send(message);
    });

    ws.on('close', function() {
        console.log('连接已关闭');
    });

    ws.on('error', function() {
        console.log('发生错误');
    });

});

以上便是带你认识HTML5中WebSocket的完整攻略，包含了基本属性、基本方法及相关示例的讲解，希望对你有所帮助。