Php 在WebSocket中重新启动服务器时重新连接客户端

我正在使用web套接字，使用PHP5和Chrome浏览器作为客户端。 我从网站上获取了代码

我运行服务器，客户端也已连接。我也可以聊天。 现在，当我重新启动服务器（通过杀死它并再次启动它）时 客户端获取断开连接的信息，但在我发送消息时自动不与服务器重新连接

---

如何做到这一点？就像当我获取断开连接的信息时，我是否应该检查它并将其发送给JavaScript以刷新页面或重新连接？

当服务器重新启动时，Web套接字连接关闭，因此会触发JavaScript

onclose

事件。下面是一个每五秒钟尝试重新连接的示例

function start(websocketServerLocation){
    ws = new WebSocket(websocketServerLocation);
    ws.onmessage = function(evt) { alert('message received'); };
    ws.onclose = function(){
        // Try to reconnect in 5 seconds
        setTimeout(function(){start(websocketServerLocation)}, 5000);
    };
}

---

Andrew给出的解决方案并不完美，因为在连接丢失的情况下，服务器可能会发送几个关闭事件

---

在这种情况下，您将设置几个设置。Andrew给出的解决方案只有在服务器在5秒钟前准备就绪时才能起作用

function start(websocketServerLocation){
    ws = new WebSocket(websocketServerLocation);
    ws.onmessage = function(evt) { alert('message received'); };
    ws.onclose = function(){
        // Try to reconnect in 5 seconds
        setTimeout(function(){start(websocketServerLocation)}, 5000);
    };
}

然后，基于重新设计的Andrew解决方案，我使用了setInterval将ID附加到window对象（这样它在“任何地方”都可用）：

---

我已经在纯香草JavaScript中使用这种模式有一段时间了，它比其他答案支持更多的情况

document.addEventListener("DOMContentLoaded", function() {

  'use strict';

  var ws = null;

  function start(){

    ws = new WebSocket("ws://localhost/");
    ws.onopen = function(){
      console.log('connected!');
    };
    ws.onmessage = function(e){
      console.log(e.data);
    };
    ws.onclose = function(){
      console.log('closed!');
      //reconnect now
      check();
    };

  }

  function check(){
    if(!ws || ws.readyState == 3) start();
  }

  start();

  setInterval(check, 5000);


});

这将在服务器关闭连接后重试，并将每隔5秒检查一次连接，以确保连接正常

因此，如果服务器在运行时或onclose事件发生时未启动，那么一旦连接重新联机，它仍将恢复连接

---

注意：使用此脚本将不允许您停止尝试打开连接。。。但我想这就是你想要的吗？

下面是我在项目中使用的代码，它们100%有效

将所有websocket代码放入init函数中

在onclose回调中，再次调用init

最后，在documentready函数中调用init函数

var name=sessionStorage.getItem（'name'）

wsUri=“ws://localhost:8080”；
var-websocket；
$（函数（）{
init（）；
$（“聊天室文本框”）。在（“按键”，功能（e）{
如果（e.keyCode==13）{//输入按钮
e、 预防默认值（）；
var mymessage=$（'#聊天室文本框'）.val（）；
如果（mymessage）{
var msg={type:'chat_text'，数据：{name:name，msg:mymessage}；
控制台日志（msg）；
send（JSON.stringify（msg））；
$（'#聊天室文本框'）.val（''）；
}               
返回false；
}        
});      
});     
函数init（）{
websocket=新的websocket（wsUri）；
websocket.onopen=函数（ev）{/*连接打开*/}
websocket.onmessage=函数（ev）{
var data=JSON.parse（ev.data）；//PHP发送JSON数据
var type=data.type；//警报（JSON.stringify（data））；
开关（类型）{
案例“聊天室文本”：
var text=“+data.data.sender_name+”：“+data.data.msg+”；
$（“#聊天信息”）。追加（文本）；
打破
违约：
打破
}        
};     
websocket.onerror=函数（ev）{}；
websocket.onclose=函数（ev）{init（）；}；
}

重新连接WebSocket 有一个小的JavaScript库装饰WebSocket API，以提供WebSocket连接，如果连接断开，该连接将自动重新连接

gzip压缩的小型库小于600字节

存储库位于以下位置：

还有一个类型脚本库。只需将其包括在内，并将

新WebSocket

替换为

新的重新连接WebSocket

存储库位于以下位置：

服务器洪水 如果在服务器重新启动时有大量客户端连接到服务器。 通过使用指数退避算法来管理客户端的重新连接时间可能是值得的

算法的工作原理如下：

对于k次尝试，生成0到2^k-1之间的随机时间间隔

如果能够重新连接，请将k重置为1

如果重新连接失败，k增加1，过程在步骤1重新启动

要截断最大间隔，当达到某个尝试次数k时，k在每次尝试后停止增加

法国：

重新连接WebSocket不会使用此算法处理重新连接

---

无法发表评论，但有以下内容：

var socket;

const socketMessageListener = (event) => {
  console.log(event.data);
};

const socketOpenListener = (event) => {
  console.log('Connected');
  socket.send('hello');
};

const socketCloseListener = (event) => {
  if (socket) {
    console.error('Disconnected.');
  }
  socket = new WebSocket('ws://localhost:8080');
  socket.addEventListener('open', socketOpenListener);
  socket.addEventListener('message', socketMessageListener);
  socket.addEventListener('close', socketCloseListener);
};

socketCloseListener();

// for testing
setTimeout(()=>{
  socket.close();
},5000);

    notifySocketClose(event) { 

        if (!event.wasClean) { 
            setTimeout(() => {
                this.setupSocket()
            }, 1000);       
        }
    }

    setupSocket() { // my function to handle opening of socket, event binding etc.
    .....
    .....

            this.websocketConnection = this.websocketConnection ? this.websocketConnection : new WebSocket(socketUrl);
            this.websocketConnection.onclose = this.notifySocketClose.bind(this);   
        } 
    }
    .....
    .....

Plus已经足够好了：）

函数wsConnection（url）{
var ws=新的WebSocket（url）；
var s=（l）=>console.log（l）；
ws.onopen=m=>s（“已连接”）
ws.onmessage=m=>s（“接收：+JSON.parse（m.data））
ws.onerror=e=>s（“错误”）
ws.onclose=e=>{
s（“连接关闭”）；
setTimeout（（函数（）{
var ws2=新的WebSocket（ws.url）；
ws2.onopen=ws.onopen；
ws2.onmessage=ws.onmessage；
ws2.onclose=ws.onclose；
ws2.onerror=ws.onerror；
ws=ws2
}
).绑定（此），5000）
}
var f=m=>ws.send（JSON.stringify（m））| |“send:+m；
f、 ping=（）=>ws.send（JSON.stringify（“ping”）；
f、 close=（）=>ws.close（）；
返回f
}
c=新的wsConnection（'wss://echo.websocket.org');
setTimeout（（）=>c（“你好，世界……世界……世界……世界……d”），5000；
setTimeout（（）=>c.close（），10000）；
setTimeout（（）=>c（“我还活着！”），20000

此代码将创建一个websocket，它将
断开连接5秒后自动重新连接。
10秒后模拟自动断开连接。
最后，我在vue+ts中实现ws-auto reconnect，如下所示：

var socket;

const socketMessageListener = (event) => {
  console.log(event.data);
};

const socketOpenListener = (event) => {
  console.log('Connected');
  socket.send('hello');
};

const socketCloseListener = (event) => {
  if (socket) {
    console.error('Disconnected.');
  }
  socket = new WebSocket('ws://localhost:8080');
  socket.addEventListener('open', socketOpenListener);
  socket.addEventListener('message', socketMessageListener);
  socket.addEventListener('close', socketCloseListener);
};

socketCloseListener();

// for testing
setTimeout(()=>{
  socket.close();
},5000);

    notifySocketClose(event) { 

        if (!event.wasClean) { 
            setTimeout(() => {
                this.setupSocket()
            }, 1000);       
        }
    }

    setupSocket() { // my function to handle opening of socket, event binding etc.
    .....
    .....

            this.websocketConnection = this.websocketConnection ? this.websocketConnection : new WebSocket(socketUrl);
            this.websocketConnection.onclose = this.notifySocketClose.bind(this);   
        } 
    }
    .....
    .....


WebSocket的客户端关闭事件具有wasCl