Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

Reconnect WebSocket หลัง Connection ปิด ด้วย HTML/JavaScript

สร้าง WebSocket ใหม่เมื่อปิด (Reconnection Logic)

WebSocket ออกแบบให้ค้างอยู่ แต่หากปิด ให้สร้างใหม่ใน onclose handler

Pattern แบบ Recursive Reconnect

var socket;
const connect = () => {
    socket = new WebSocket('ws://localhost:8080');
    
    socket.addEventListener('open', (event) => {
        console.log('Connected');
        socket.send('hello');
    });
    
    socket.addEventListener('message', (event) => {
        console.log(event.data);
    });
    
    socket.addEventListener('close', (event) => {
        console.error('Disconnected. Reconnecting in 3s...');
        setTimeout(connect, 3000); // รอ 3 วินาที แล้วลองใหม่
    });
    
    socket.addEventListener('error', (event) => {
        console.error('Error:', event);
        socket.close(); // จะ trigger close event
    });
};

connect(); // เริ่มเชื่อมต่อครั้งแรก

ใช้ setTimeout หน่วงเวลา กัน Reconnect Storm