原生WebSocket： new WebSocket
WebSocket | ThinkTS官网
export default {data() {return {socket: null};},created() {// 1. 创建 WebSocket 实例this.socket = new WebSocket('ws://localhost:3000');// 2. 监听 WebSocket 连接打开事件this.socket.onopen = () => {console.log('当前客户端已连接');};// 3. 监听 WebSocket 消息事件this.socket.onmessage = (event) => {console.log('客户端接收的数据：', JSON.parse(event.data));// 4. 发送消息给服务端let post_data = {name: 'test'}this.socket.send(JSON.stringify(post_data))};// 5. 监听 WebSocket 关闭事件this.socket.onclose = () => {console.log('WebSocket closed');};// 6. 监听 WebSocket 错误事件this.socket.onerror = (error) => {console.log('WebSocket error:', error);};},methods: {// 发送消息按钮sendMessage(message) {// 4. 发送消息到 WebSocket 服务器this.socket.send(JSON.stringify(message))}},beforeDestroy() {// 关闭 WebSocket 连接if (this.socket) {this.socket.close();}}
};
