首页 > 解决方案 > 如何在不点击 f5 的情况下查看某人的帖子?

问题描述

每当我使用 post 方法时,我可以立即看到我自己的消息,但是每当有人发布消息时,我直到单击 F5 才看到它。我该如何解决?

 methods: {
    sendPost() {
      axios
      .post("https://app3428552893.herokuapp.com/v2/posts", {
        name: this.name,
        time: this.time,
        message: this.newPost
      }).then(response => {
        this.placeText.unshift(response.data);
      })
    },
app.post('/v2/posts', (req,res)=> {
    const dbCrud = req.body;
    Crud.create(dbCrud, (err,data)=> {
        if (err) {
            res.status(500).send(err)
        } else {
            res.status(201).send(data)
        }
    })

标签: node.jsvue.jsvuejs2

解决方案


HTML 内容一旦加载到浏览器中并显示出来就是静态的。它不会自行改变。要使其更新以反映最近的更改,您有以下选项:

  1. 自动刷新:您可以将页面配置为在某个时间间隔自动重新加载。这可以通过页面中的 Javascript 或<meta>标签来完成。

  2. 轮询新内容:您可以在页面中使用 Javascript 定期(在某个时间间隔内)通过 Ajax 调用询问服务器是否有新内容。当有新内容时,您可以让服务器使用 Ajax 响应发送它,然后您的 Javascript 将该内容插入到页面中,或者您可以在那时使用您的 Javascript 触发页面重新加载。

  3. 动态交付新内容: 如果网页中的 Javascript 在网页加载后立即打开与服务器的 webSocket 或 socket.io 连接,或者如果它建立连接以便接收服务器发送的事件 (SSE),则这允许服务器在服务器上发生某些事件时(例如服务器看到有新内容)动态地将内容发送到网页。

    webSocket 或 socket.io 连接(socket.io 建立在 webSocket 之上)背后的想法是,一旦你建立了这个连接,那么服务器或客户端可以随时通过该连接发送消息,而无需另一端提出要求。因此,连接可以大部分时间处于空闲状态,直到服务器有一些它希望最终用户看到的新内容,此时,服务器可以通过现有的 webSocket/socket.io 连接发送它,用户将收到它消息/数据立即。

    使用服务器发送事件 (SSE) 是另一种允许服务器直接向客户端发送更新的技术。虽然 webSocket/socket.io 是两种方式(客户端或服务器都可以通过它们发送数据),但 SSE 是一种方式,只有服务器可以使用它向客户端发送数据。

从服务器可扩展性的角度来看,选项 #1 和 #2 并不是特别有效,因为客户端会定期向服务器请求新内容,即使没有。由于这两种方法还需要某种轮询间隔(不能很短),它们也不是很即时,因此在最终用户看到最新内容之前通常会有延迟。

选项#3 需要更多的工作来实现,但通常提供更好的用户体验和更少浪费的服务器周期来回答空的轮询请求。


推荐阅读