使用SocketIO接收‘fire’通知后，如何刷新HTML页面？

我正在使用JavaScript库SocketIO开发项目，同时拥有一个包含index.html文件的网页。我希望通过SocketIO客户端接收通知，且每次收到通知时刷新网页。目前我仅能成功接收‘fire’通知，实现代码如下：

// listen and receive fire notification
function fire(socket) {
  socket.on('fire', () => {
    console.log('Fire notification received')
  })
}

请问如何在收到该‘fire’通知时刷新HTML页面？

很简单，你只需要在收到fire事件的回调函数里调用浏览器原生的页面刷新API就能实现需求了。

具体实现方案 #

浏览器提供了location.reload()方法来重新加载当前页面，它有两种使用模式：

• 默认模式：location.reload() —— 浏览器会优先加载缓存中的页面资源，适合资源没有更新的场景
• 强制刷新缓存：location.reload(true) —— 强制从服务器重新拉取所有资源，忽略本地缓存，适合需要获取最新页面内容的场景

修改后的代码如下：

// listen and receive fire notification, then refresh page
function fire(socket) {
  socket.on('fire', () => {
    console.log('Fire notification received, refreshing page...')
    // 基础刷新，可根据需求替换成带true的强制刷新
    location.reload();
    // 若需强制刷新缓存，启用下面这行
    // location.reload(true);
  })
}

额外注意事项 #

• 确保你的socket实例已经正确连接到服务器，否则事件监听不会生效
• 要避免出现无限刷新循环：比如不要让服务器在页面加载完成后立刻发送fire通知，不然页面会一直重复刷新
• 如果页面存在未保存的用户输入，刷新会导致数据丢失，必要时可以添加确认提示：

  socket.on('fire', () => {
    console.log('Fire notification received')
    if (confirm('收到通知，是否刷新页面？')) {
      location.reload();
    }
  })
  

内容的提问来源于stack exchange，提问作者gall indi