为什么需要Websocket？

Question

我有一个VueJS单页应用程序（SPA），当用户成功在我的应用程序中注册时，它将他们重定向到主页。此主页上显示一个栏（警告），要求用户确认注册过程中提供的电子邮件。注意：我们将不断显示此栏，直到他们确认！

当前，当用户确认电子邮件时，它会在新标签中打开确认页面，显示Email have been successfully confirmed!，并且该栏消失，但是当用户转到原始标签（首页）时，该栏仍会显示。

您是否可以通过任何方式在后台侦听用户状态的更改（user.isVerified），并在用户不参与的情况下隐藏该栏（刷新页面/单击任何链接）？

要获取用户数据，我正在使用API调用：

getUser({ commit }) {
        return new Promise((resolve, reject) => {
            axios
                .get('http://localhost:8000/api/user')
                .then(response => {
                    commit('setData', response.data.data);
                    resolve(response);
                })
                .catch(errors => {
                    reject(errors.response);
                })
        })
    }

JSON响应：

{
    "data": {
        "id": 2,
        "name": "John Doe",
        "email": "john@email.com",
        "isVerified": true,
        "createdAt": "2020-04-17T13:17:07.000000Z",
        "updatedAt": "2020-04-26T23:15:24.000000Z"
    }
}

Vue页面：

<template>
    <v-content>
        <v-alert
                v-if="user.isVerified === false"
                tile
                dense
                color="warning"
                dark
                border="left"
        >
            <div class="text-center">
                <span>
                    Hey {{ user.name }}! We need you to confirm your email address.
                </span>
            </div>
        </v-alert>

        <v-content>
            <router-view></router-view>
        </v-content>
    </v-content>
</template>

Answer 1

要清楚，当您说“侦听状态”时-每个Vue实例都有其自己的状态，因此在另一个选项卡中打开的网站不会自然地与原始选项卡共享状态。听起来好像您希望Vue应用程序监听数据库中的更改，以便您可以知道API何时将用户标记为“已确认”。对于Websockets，这是一个绝佳的机会。

从本质上讲，您的应用程序具有针对“用户确认”消息的“监听器”。当您的API确认用户时，它将发送消息。当侦听器收到该消息时，它将更新状态的用户确认并刷新（或者更好的是，从API重新请求用户）。这与推动通知，聊天应用程序等的技术相同。

Answer 2

您必须在构象组件中的某个位置设置user.isVerified = true，例如在mounted钩子中：

ConformationPage.vue

mounted () {
  this.user.isVerified = true
},

如果“用户”对象存储在Vuex商店中，请改为将更改分发或提交到商店：

ConformationPage.vue

mounted () {
  this.$store.commit('userIsVerified', true)
}

store.js

mutations: {
  userIsVerified (state, value) {
    state.user.isVerified = value
  }
}

请记住，如果该ConformationPage.vue组件是一个页面（路由），而不仅仅是一个组件，请确保用户不能仅仅通过访问该页面来验证自己，甚至没有收到电子邮件。

还要确保您延迟加载该组件，因为否则可能会在用户打开网站时呈现该组件，这将立即对其进行验证。

Answer 3

tldr; 这是Websockets的工作。

下面的答案很长

为什么需要Websocket？

其背后的想法是，您的应用程序需要知道用户是否确实确认了他的电子邮件。为了成功确认它，它必须访问连接到您的user数据库的后端服务器。

所以现在，您需要后端服务器来更新前端应用程序中的数据，对吗？对！如果您能够回答这个问题，那么您已经中途了。

但是，这是您的前端应用程序无法做到的。对于当前问题中的示例，您使用了axios，它使用 HTTP协议向后端服务器询问数据。

那么HTTP协议怎么了？

HTTP协议的问题在于，它仅允许您请求一种方式访问后端服务器。因此，您的交互只是请求和响应。好吧，那又如何呢？可以吗我可以做某种setInterval，直到得到想要的response为止？好吧，那是我的想法，从技术上讲，你可以。

但是，这是一种不好的做法，您甚至都无需考虑。

好，那我怎么知道数据库何时更新？

这是Websocket出现的地方。 Websocket

的MDN解释

WebSocket API是一项先进的技术，可以打开用户浏览器和服务器之间的双向交互式通信会话。使用此API，您可以将消息发送到服务器，然后接收事件驱动的响应，而不必轮询服务器以获取答复。

以一种简单的方式，它允许您的后端服务器与您的前端应用程序对话。我需要更换我的HTTP后端服务器吗？不，WebSocket实际上是与HTTP结合使用的，就像对HTTP协议进行某种扩展一样。

现在我要说的是，这是艰苦的工作。要了解websocket，并创建支持您需求的后端服务器。另外，您的前端应用程序还必须适应使用WebSocket。

如果您真的对获取一些实时数据感兴趣，并且对创建后端服务器不感兴趣（或没有时间），则应签出Firebase。它是免费的，您可以从中获得乐趣。

我希望可以帮助您入门。谢谢！

Vuejs无需用户参与即可检测到更改并更新页面

3 个答案:

ConformationPage.vue

ConformationPage.vue

store.js

为什么需要Websocket？

那么HTTP协议怎么了？

好，那我怎么知道数据库何时更新？