【uni-app】websocket在vue的基本使用

举报
Laura_张 发表于 2022/08/27 00:49:05 2022/08/27
【摘要】 文章目录 创建websocket连接链接websocket打开websocket链接，发送消息接收消息 事件监听，关闭socket 关闭websocket点击事件调用websocket全...

文章目录

前后端需要使用websocket连接来进行传值，但是手机端和APP端的websocket方法使用是不一致的，需要进行区分。

创建websocket连接

进入页面的时候创建websocket连接，整个页面随时可用，整个websocket可以放在进度条或者是导航栏，我这来是放在了时间进度条里面，每个页面都可以调用。

这个方法是在created的方法中调用的，后续其他关于websocket的方法都在这个方法中写。

   connectSocketInit() {}

  
 
    
  
  • 1
    •

链接websocket

创建一个websocket对象，用来发送，接收和关闭socket，用这个对象来连接服务器

this.socketTask = uni.connectSocket({
        // 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
        url: config.socketBaseUrl,//后端websocket地址
        success(data) {
          console.log("websocket连接成功");
        },
      });

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    •

打开websocket链接，

只有打开websocket链接才可以发消息和接收消息

this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    •

发送消息

this.socketTask.send({
	data:{
		"classId":this.localStorage.get("classId"),
		"courseId":this.localStorage.get("courseId")
	},
	async success() {
		console.log("消息发送成功");
	},
});

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    •

接收消息

this.socketTask.onMessage((res) => {
	console.log("收到服务器内容：" + res.data);
});

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    •

事件监听，关闭socket

// 这里仅是事件监听【如果socket关闭了会执行】
this.socketTask.onClose(() => {
	console.log("已经被关闭了");
});

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    •

关闭websocket

这个方法在页面离开的时候执行

    // 关闭websocket【离开这个页面的时候执行关闭】
    closeSocket() {
      this.socketTask.close({
        success(res) {
          this.is_open_socket = false;
          console.log("关闭成功", res);
        },
        fail(err) {
          console.log("关闭失败", err);
        },
      });
    },

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    •

点击事件调用websocket

    clickRequest() {
    //要确保当前已经打开了websocket链接
      if (this.is_open_socket) {
        //数据发送
        //获取数据
        var classId = localStorage.getItem("classId");
        var courserId = localStorage.getItem("courseId");
        this.type = "approve";
        //拼接后端接收的字符串
        let actions ="type:" +this.type + "," +"classId:" +classId +",courserId:" +courserId;
        this.socketTask.send({
          data: actions,
          async success() {
            console.log("消息发送成功");
          },
        });
      }
    },

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    •

全部代码

  // 进入这个页面的时候创建websocket连接【整个页面随时使用】
    connectSocketInit() {
      // 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
      this.socketTask = uni.connectSocket({
        // 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
        url: config.socketBaseUrl,
        success(data) {
          console.log("websocket连接成功");
        },
      });

      // 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
      this.socketTask.onOpen((res) => {
        console.log("WebSocket连接正常打开中...！");
        this.is_open_socket = true;

        // 注：只有连接正常打开中 ，才能正常成功发送消息
       
        this.socketTask.send({
        	data:{
        		"classId":this.localStorage.get("classId"),
        		"courseId":this.localStorage.get("courseId")
        	},
        	async success() {
	        	console.log("消息发送成功");
	        },
        });

        // 注：只有连接正常打开中 ，才能正常收到消息
        this.socketTask.onMessage((res) => {
          //数据接收
          this.redata = res.data;
          if (this.redata.indexOf("suspend") != -1) {
            var array = this.redata.split(",");
            var activeId = array[5];
            var activeId1 = activeId.split(":")[1];
            var activityId = localStorage.getItem("activityId");
            if (this.redata.match("type:suspend") && activeId1 == activityId) {
              this.num = this.num + 1;
              this.$refs.uToast.show({
                title: "请注意，当前有 " + this.num + " 名学生申请暂停课程",
                type: "success",
                position: "top",
              });
            }
          }
        });
      });
      // 这里仅是事件监听【如果socket关闭了会执行】
      this.socketTask.onClose(() => {
        console.log("已经被关闭了");
      });
    },
    // 关闭websocket【离开这个页面的时候执行关闭】
    closeSocket() {
      this.socketTask.close({
        success(res) {
          this.is_open_socket = false;
          console.log("关闭成功", res);
        },
        fail(err) {
          console.log("关闭失败", err);
        },
      });
    },
  
    clickRequest() {
      if (this.is_open_socket) {
        //数据发送
        //获取数据
        var classId = localStorage.getItem("classId");
        var courserId = localStorage.getItem("courseId");
        this.type = "approve";
        //拼接后端接收的字符串
        let actions ="type:" +this.type + "," +"classId:" +classId +",courserId:" +courserId;
        this.socketTask.send({
          data: actions,
          async success() {
            console.log("消息发送成功");
          },
        });
      }
    },


  
 
    
  
  • 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
    • 
  
  • 56
    • 
  
  • 57
    • 
  
  • 58
    • 
  
  • 59
    • 
  
  • 60
    • 
  
  • 61
    • 
  
  • 62
    • 
  
  • 63
    • 
  
  • 64
    • 
  
  • 65
    • 
  
  • 66
    • 
  
  • 67
    • 
  
  • 68
    • 
  
  • 69
    • 
  
  • 70
    • 
  
  • 71
    • 
  
  • 72
    • 
  
  • 73
    • 
  
  • 74
    • 
  
  • 75
    • 
  
  • 76
    • 
  
  • 77
    • 
  
  • 78
    • 
  
  • 79
    • 
  
  • 80
    • 
  
  • 81
    • 
  
  • 82
    • 
  
  • 83
    • 
  
  • 84
    •

这里只介绍了websocket在APP端应用的代码，下一篇介绍一下websocket服务端的代码。点击直达

文章来源: blog.csdn.net，作者：张艳伟_Laura，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/Laura__zhang/article/details/123315689

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Vue websocket 移动APP
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入