JavaScript WebSocket 实时通信：原理、实现与安全策略

// 建立WebSocket连接
var ws = new WebSocket('wss://example.com/socketserver');

// 连接建立事件
ws.onopen = function() {
    console.log('连接成功');
    // 可以发送数据
    ws.send(JSON.stringify({ type: 'message', content: 'Hello Server!' }));
};

// 数据接收事件
ws.onmessage = function(event) {
    console.log('接收到消息：', event.data);
};

// 错误处理
ws.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// 连接关闭事件
ws.onclose = function() {
    console.log('WebSocket连接已关闭');
};

// 发送JSON格式数据
function sendJsonData(data) {
    if (ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify(data));
    } else {
        console.error('WebSocket连接未打开');
    }
}

// 接收JSON数据示例
ws.onmessage = function(event) {
    var message = JSON.parse(event.data);
    if (message.type === 'response') {
        console.log('服务器响应：', message.content);
    }
};

// 设置心跳间隔为25秒
var heartbeatInterval = 25000;

// 定义心跳函数
function sendHeartbeat() {
    if (ws.readyState === WebSocket.OPEN) {
        ws.send('ping');
    }
}

// 设置定时器发送心跳
var heartbeatTimer = setInterval(sendHeartbeat, heartbeatInterval);

// 监听心跳响应
ws.onmessage = function(event) {
    if (event.data === 'pong') {
        console.log('心跳响应收到');
        // 可以在这里重置某些状态或计时器
    }
};

// 连接关闭时清除心跳定时器
ws.onclose = function() {
    clearInterval(heartbeatTimer);
};