WebSocket连接的例子

// 初始化WebSocket连接
const initWebSocket = () => {console.log("初始化链接中...")const websocketUrl =`ws://61.54.84.16:9090/`;// WebSocket服务器地址websocket = new WebSocket(websocketUrl)//使用真实的webscket// websocket = new MockWebSocket(websocketUrl);// 使用模拟的WebSocket文件websocket.onopen = () => {console.log('WebSocket连接已建立', websocket)// 发送心跳消息保持连接setInterval(() => {if (websocket.readyState === 1) {websocket.send(JSON.stringify({type: 'ping'}));}}, 30000);}websocket.onmessage = (event) => {try {console.log('接收到WebSocket数据:', event)const data = JSON.parse(event.data)handleWebSocketData(data)} catch (error) {console.error('解析WebSocket数据失败:', error)}}websocket.onclose = () => {console.log('WebSocket连接已关闭')// 5秒后尝试重连setTimeout(initWebSocket, 5000)}websocket.onerror = (error) => {console.error('WebSocket连接错误:', error)}
}// 处理WebSocket接收到的数据
const handleWebSocketData = (msg) => {console.log('处理WebSocket数据:', msg)
}

模拟webscket传输数据的过程

mockWebScoket.ts

// 模拟WebSocket对象（用于演示，实际项目中应连接真实服务器）
// 其他页面引入
//  import MockWebSocket from './mockWebScoket';
// 调用
// const ws = new MockWebSocket('ws://example.com/ws');
// mock返回的数据
// currentNumber:"A015"
// department:"妇科诊区"
// waitingQueue: ['A016', 'A017', 'A018', 'A019', 'A020', 'A021', 'A022', 'A023', 'A024', 'A025']export class MockWebSocket {static CONNECTING = 0;static OPEN = 1;static CLOSED = 3;static DEPARTMENTS = ["内科诊区", "外科诊区", "儿科诊区", "妇科诊区", "眼科诊区"];constructor(url) {this.url = url;this.readyState = MockWebSocket.CONNECTING;this.onopen = null;this.onmessage = null;this.onclose = null;this.onerror = null;this.mockInterval = null;//默认触发// 模拟连接过程setTimeout(() => {// 模拟连接成功this.readyState = MockWebSocket.OPEN;if (this.onopen) {this.onopen(new Event('open'));}// 开始发送模拟数据this.startMockData();}, 500);}send(data) {if (this.readyState !== MockWebSocket.OPEN) {console.warn("WebSocket is not open. Current state:", this.readyState);return;}console.log('发送数据:', data);}close() {this.readyState = MockWebSocket.CLOSED;if (this.onclose) {this.onclose(new CloseEvent('close'));}if (this.mockInterval) {clearInterval(this.mockInterval);this.mockInterval = null;}}startMockData() {console.log("进入mock的数据")if (this.mockInterval) {clearInterval(this.mockInterval);}let counter = 0;const department = MockWebSocket.DEPARTMENTS[Math.floor(Math.random() * MockWebSocket.DEPARTMENTS.length)];this.mockInterval = setInterval(() => {counter = (counter % 50) + 1;const currentNumber = `A${counter.toString().padStart(3, '0')}`;const waitingQueue = [];for (let i = 1; i <= 10; i++) {const nextNum = (counter + i) <= 50? counter + i: (counter + i) % 50 || 50;waitingQueue.push(`A${nextNum.toString().padStart(3, '0')}`);}//这是传输过去的数据const data = {currentNumber:currentNumber,department: department,waitingQueue: waitingQueue};if (this.onmessage) {this.onmessage({data: JSON.stringify(data)});}}, 15000);}
}