Question

假设我有两台服务器（表示服务我的Vue SPA [端口8080]，快递+套接字作为API [端口8082]）。

我想打开套接字连接，以防用户通过身份验证（在ajax中对端口8082上运行的服务器进行身份验证）。

因此，假设用户登录后，应用程序会重定向到主页。我创建了Home.vue组件，我尝试（在创建的钩子内）为客户端导入socket.io脚本并打开连接：

<template>
  <div>
    Home
  </div>
</template>

<script>
import config from '../../../config/env'
export default {
  data() {
    return {

    }
  },
  
  created() {
    var scriptElement = document.createElement('script')
    scriptElement.type = "text/javascript"

    scriptElement.src = `http://${config.baseSocketUrl}/socket.io/socket.io.js`
    document.getElementsByTagName("head")[0].appendChild(scriptElement);

    scriptElement.onload(() => {
      const socket = io(config.crmSocket_nsp)

      socket.on('welcome', (data) => {
        alert(data)
      })
    })
  }
}

</script>

<style lang="scss" scoped>

</style>

它不顺利^^'

所以我试图将脚本标记硬编码在应用程序mount（）的index.html文件中，然后使用相同的方法连接创建的生命周期钩子内的套接字。但是进展不顺利。这里的io未定义！

任何方向都会受到祝福！谢谢大家！

Answer 1

它应该在beforeMount()而不是created()

阶段起作用

从Vue.js组件连接到socket.io.

1 个答案: