uniapp-websocket实现

举报
林太白 发表于 2025/03/31 10:09:49 2025/03/31
【摘要】 uniapp-websocket实现

uniapp-websocket实现

官方文档

https://uniapp.dcloud.net.cn/api/request/websocket.html#connectsocket

属性认识

connectsocket创建连接

在uniapp中,实现WebSocket可以使用官方给我们提供的uni.connectSocket方法来创建一个WebSocket连接。该方法接受一个对象作为参数,该对象包含以下属性:

- url:WebSocket服务器的URL地址。
- header:HTTP请求头,可以用来传递一些自定义的参数。
- protocols:WebSocket子协议,可以用来指定WebSocket连接使用的协议。
- method:HTTP请求方法,默认为GET

下面是一个uni.connectSocket创建WebSocket连接的示例:

uni.connectSocket({
	url: 'wss://www.example.com/socket',
	header: {
		'content-type': 'application/json'
	},
	protocols: ['protocol1'],
	method: 'GET'
});

打开连接onSocketOpen

uni.connectSocket({
  url: 'wss://www.example.com/socket'
});
uni.onSocketOpen(function (res) {
  console.log('WebSocket连接已打开!');
});

监听错误onSocketError

uni.onSocketError(function (res) {
  console.log('WebSocket连接打开失败,请检查!');
});

发送数据sendSocketMessage

 uni.sendSocketMessage({
    data: msg
});

接收信息onSocketMessage

uni.connectSocket({
  url: 'wss://www.example.com/socket'
});

uni.onSocketMessage(function (res) {
  console.log('收到服务器内容:' + res.data);
});

关闭连接closeSocket

uni.closeSocket(OBJECT)

监听WebSocket关闭

uni.onSocketClose(function (res) {
  console.log('WebSocket 已关闭!');
});

项目使用

接下来我们就在项目之中连接我们的WebSocket服务,并监听消息。

<template>
  <view>
  </view>
</template>
<script setup name="websocket">
import { ref, onMounted, onUnmounted } from 'vue';

// WebSocket 状态和通知列表
const wsOpen = ref(false);
const noticeList = ref([]);

// WebSocket 连接实例
let ws = null;

// 在组件挂载时创建 WebSocket 连接
onMounted(() => {
  // 使用 uni.connectSocket 代替 new WebSocket
  ws = uni.connectSocket({
    url: xxx,// WebSocket 服务器地址
    success() {
      console.log('WebSocket 连接成功');
      wsOpen.value = true;
    },
    fail() {
      console.error('WebSocket 连接失败');
    }
  });

  // 监听 WebSocket 消息事件
  uni.onSocketMessage((event) => {
    console.log('收到消息:', event.data);
    try {
      const message = JSON.parse(event.data);
      if (message.type === 'info') {
        noticeList.value.push(message.data); 
		uni.showModal({
			title: `通知`,
			cancelText:'取消',
			confirmText:'查看',
			cancelColor:"#ccc",
			confirmColor:'#8f41e9',
			content: `${message.data}`,
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
      }
    } catch (error) {
      console.error('消息解析错误:', error);
    }
  });

  // 监听 WebSocket 错误事件
  uni.onSocketError((error) => {
    console.error('WebSocket 发生错误:', error);
  });

  // 监听 WebSocket 关闭事件
  uni.onSocketClose(() => {
    console.log('WebSocket 连接已关闭');
    wsOpen.value = false;
  });
});

// 在组件卸载时关闭 WebSocket 连接
onUnmounted(() => {
  if (ws) {
    uni.closeSocket(); // 关闭 WebSocket 连接
  }
});
</script>
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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