在Vue 3中，使用`<script setup>`语法糖可以更加简洁地编写组件。这种语法允许你直接在`<script>`标签内定义组件的逻辑，而不需要传统的`export default`语句。下面是如何使用`<script setup>`来实现WebSocket通信的示例：

### 1. 安装WebSocket库

如果你还没有安装`socket.io-client`，请先安装它。

npm install socket.io-client
# 或者
yarn add socket.io-client

### 2. 创建WebSocket连接

在`<script setup>`中，你可以创建WebSocket连接，并在生命周期钩子（如`onMounted`）中处理连接和断开逻辑。

```vue
<template>
  <div>
    <button @click="connect">连接</button>
    <button @click="disconnect">断开连接</button>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import io from 'socket.io-client';

const socket = ref(null);

onMounted(async () => {
  socket.value = io('http://localhost:3000'); // 替换为你的服务器地址
  console.log('Connected to server');
  // 监听连接事件
  socket.value.on('connect', () => {
    console.log('Connected to server');
  });
  // 监听消息事件
  socket.value.on('message', (data) => {
    console.log('Received message from server:', data);
  });
  // 监听错误事件
  socket.value.on('error', (error) => {
    console.error('WebSocket error:', error);
  });
});

const connect = () => {
  socket.value.connect();
};

const disconnect = () => {
  if (socket.value) {
    socket.value.disconnect();
    console.log('Disconnected from server');
  }
};
</script>
```

### 3. 发送和接收消息

在`<script setup>`中，你可以直接在`socket`对象上调用方法来发送和接收消息。

```vue
<template>
  <input v-model="message" placeholder="Type a message" />
  <button @click="sendMessage">Send</button>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import io from 'socket.io-client';

const socket = ref(null);
const message = ref('');

onMounted(async () => {
  socket.value = io('http://localhost:3000');
  // ... 连接事件处理
});

const sendMessage = () => {
  if (message.value.trim()) {
    socket.value.emit('message', message.value);
    message.value = '';
  }
};
</script>
```

### 4. 关闭WebSocket连接

在组件卸载时，应该关闭WebSocket连接。

```javascript
onBeforeUnmount(() => {
  if (socket.value) {
    socket.value.close();
  }
});
```

### 5. 使用WebSocket

你可以在组件的任何部分使用`socket`来发送或接收消息。

以上就是在Vue 3中使用`<script setup>`语法实现WebSocket通信的基本步骤。根据你的项目需求，你可以进行相应的调整和扩展。记得在实际部署时，将WebSocket服务器的地址替换为你的实际地址，并根据需要处理连接、消息和错误事件。