广告位联系
返回顶部
分享到

vue项目中使用websocket的正确姿势

JavaScript 来源:互联网 作者:秩名 发布时间:2022-01-27 20:27:01 人浏览
摘要

1. 在utils下新建websocket.js文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 // import { showInfoMsg, showErrorMsg } from

1. 在utils下新建websocket.js文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

// import { showInfoMsg, showErrorMsg } from '@/utils/popInfo'

import ElementUI from 'element-ui';

function initWebSocket(e) {

    console.log(e)

    const wsUri = WS_API + "/webSocket/" + e;

    this.socket = new WebSocket(wsUri)//这里面的this都指向vue

    this.socket.onerror = webSocketOnError;

    this.socket.onmessage = webSocketOnMessage;

    this.socket.onclose = closeWebsocket;

}

function webSocketOnError(e) {

    ElementUI.Notification({

        title: '',

        message: "WebSocket连接发生错误" + e,

        type: 'error',

        duration: 0,

    });

}

function webSocketOnMessage(e) {

    const data = JSON.parse(e.data);

    console.log(data.msgType === "INFO", data.msgType === "INFO")

    if (data.msgType === "INFO") {

        ElementUI.Notification({

            title: '',

            message: data.msg,

            type: 'success',

            duration: 3000,

        });

 

    } else if (data.msgType === "ERROR") {

        ElementUI.Notification({

            title: '',

            message: data.msg,

            type: 'error',

            duration: 0,

        });

    }

}

// 关闭websiocket

function closeWebsocket() {

    console.log('连接已关闭...')

}

function close() {

    this.socket.close() // 关闭 websocket

    this.socket.onclose = function (e) {

        console.log(e)//监听关闭事件

        console.log('关闭')

    }

}

function webSocketSend(agentData) {

    this.socket.send(agentData);

}

export default {

    initWebSocket, close

}

如果想刷新重新链接websocket 可以在App.vue页面里添加个钩子函数

1

2

3

4

5

6

7

8

9

mounted() {

   //当在任一路由页面被刷新时,便是根组件app被从新建立,此时能够进行webSocket重连

   //从localStorage中获取用户信息,是登陆状态则能够进行webSocket重连

   let token = localStorage.getItem("token");

   if (token) {

     // userMessage = JSON.parse(userMessage);

     this.$websocket.initWebSocket(token);

   }

 },

客户端主动关闭websocket 在关闭的地方触发函数就可以

1

2

3

4

5

6

7

8

logout() {

     // localStorage.clear();

     localStorage.removeItem("token");

     this.$websocket.close();

     this.$store.dispatch("LogOut").then(() => {

       location.reload();

     });

   },

注:$webSocket 是在main.js中全局注册了websocket.js文件


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计