当前位置:   article > 正文

vue-socket.io使用_vue socketio 会自动重连吗

vue socketio 会自动重连吗

使用场景: 智能助手实时问答

注意:

  • this.$socket 和this.sockets 是有区别的, 监听使用的是this.sockets, 发消息是this.$socket
  • 自动连接和自动重连有时会不生效, 需要做重连机制
  • 如果项目访问链路比较长, 需要多个nginx转发, 导致websocket返回慢或者断连, 需要在每个转发的服务上加上长连接配置:
  1. location =/域名/接口/ { //例如 /intellitent/aipLlWs/
  2. proxy_pass http://要转发到的服务地址/接口名/; // http://20.20.342:8080/aipLlWs/
  3. proxy_http_version 1.1;
  4. proxy_set_header Upgrade $http_upgrade;
  5. proxy_set_header Connection "upgrade";
  6. }

1. npm i vue-socket.io

2. main.js 文件

  1. import VueSocketIo from 'vue-socket.io'
  2. const IO = new VueSocketIo ({
  3. debug: true,
  4. connection: 'http://****:8080', // 服务器地址
  5. options: {
  6. query: 'ssx', // 参数
  7. path: '/intelligent/aaaaa', // 路径
  8. pingInterval: 2000, // 心跳间隔, 检测连接是否处于活跃状态
  9. tansports: ['websocket'], // 指定通信方式: websocket、polling、flashsocket
  10. // reconnenction: true, // 是否开启重连
  11. // autoConnet: true // 是否自动连接
  12. }
  13. })
  14. Vue.use(IO)

3. 封装socket.vue

  1. <template>
  2. <div>
  3. <!-- <button>发消息</button> -->
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'SocketUtils',
  9. data () {
  10. return {
  11. socket: '',
  12. time: 0,
  13. reconnectTimer: null
  14. }
  15. },
  16. watch: {
  17. // 监听socket的状态
  18. '$socket.io.readyState': {
  19. handler (val) {
  20. // 如果状态返回closed, 调用重连机制
  21. if (val && val == 'closed'){
  22. clearTimeout(this.reconnectTimer)
  23. this.tryReconnect('closed')
  24. }
  25. },
  26. deep: true,
  27. immediate: true
  28. }
  29. },
  30. mounted (){
  31. // 初始化
  32. if (!this.$socket) {
  33. this.$socket.open() // 手动建立连接
  34. }
  35. },
  36. sockets: {
  37. connect () {
  38. console.log('socket 连接成功')
  39. },
  40. reconnect () {
  41. console.log('socket 重连成功')
  42. },
  43. // 监听订阅事件, 和后端约定好
  44. llmSocketEvent (msg) {
  45. console.log('socket 数据')
  46. },
  47. disconnect () {
  48. console.log('socket 断开连接')
  49. clearTimeout(this.reconnectTimer)
  50. this.tryReconnect('disconnect')
  51. }
  52. },
  53. methods: {
  54. // 重连机制
  55. tryReconnect (eventName) {
  56. this.reconnectTimer = setTimeout(() => {
  57. if (this.$socket == null || this.$route.path != '/chat') {
  58. return
  59. }
  60. console.log('socket 开始重连')
  61. if (eventName == 'closed') {
  62. this.$socket.open((err) => {
  63. if (err) {
  64. this.tryReconnect(eventName)
  65. }
  66. })
  67. } else {
  68. this.$socket.connect((err) => {
  69. if (err) {
  70. this.tryReconnect(eventName)
  71. }
  72. })
  73. }
  74. })
  75. }
  76. },
  77. destroyed () {
  78. // 销毁
  79. if (!this.$socket) {
  80. return
  81. }
  82. this.sockets.unsubscribe('llmSocketEvent') // 取消订阅事件
  83. this.$socket.close() // 关闭socket
  84. }
  85. }
  86. </script>

4. 引用组件 (chat/index.vue)

  1. <template>
  2. <div>
  3. 、、、、、、、、、
  4. <!-- socket组件 -->
  5. <SocketUtils></SocketUtils>
  6. </div>
  7. </template>
  8. <script>
  9. import SocketUtils from '@/components/Websocket/socket.vue'
  10. export default {
  11. components: { SocketUtils }
  12. }
  13. </script>
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号