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>