class PrinterWebSocket {
constructor(url) {
if (PrinterWebSocket.instance) {
return PrinterWebSocket.instance;
}
this.url = url;
this.socket = null;
this.queue = []; // 打印任务队列
this.isConnecting = false;
this.retryCount = 0;
this.maxRetry = 3;
PrinterWebSocket.instance = this;
this.connect();
}
connect() {
if (this.isConnecting || this.socket) return;
this.isConnecting = true;
this.socket = new WebSocket(this.url);
this.socket.onopen = () => {
console.log('WebSocket连接已建立');
this.isConnecting = false;
this.retryCount = 0;
this.processQueue();
};
this.socket.onmessage = (event) => {
console.log('收到打印响应:', event.data);
// 处理打印响应
};
this.socket.onclose = () => {
console.log('WebSocket连接关闭');
this.socket = null;
if (this.retryCount < this.maxRetry) {
this.retryCount++;
setTimeout(() => this.connect(), 1000 * this.retryCount);
}
};
this.socket.onerror = (error) => {
console.error('WebSocket错误:', error);
this.socket = null;
this.isConnecting = false;
};
}
print(data) {
if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
console.log('连接未就绪,加入打印队列');
this.queue.push(data);
if (!this.isConnecting) {
this.connect();
}
return;
}
try {
this.socket.send(JSON.stringify(data));
console.log('打印指令已发送');
} catch (error) {
console.error('发送打印指令失败:', error);
this.queue.push(data);
this.socket = null;
this.connect();
}
}
processQueue() {
while (this.queue.length > 0 && this.socket?.readyState === WebSocket.OPEN) {
const data = this.queue.shift();
this.socket.send(JSON.stringify(data));
}
}
static getInstance(url) {
if (!PrinterWebSocket.instance) {
PrinterWebSocket.instance = new PrinterWebSocket(url);
}
return PrinterWebSocket.instance;
}
}
使用方法:
// 初始化单例(通常在应用启动时)
const printer = PrinterWebSocket.getInstance('ws://your-print-server/ws');
// 打印时直接使用
function handlePrint() {
const printData = {
type: 'print',
content: '要打印的内容',
copies: 1
};
printer.print(printData);
}
// 页面按钮点击事件
document.getElementById('print-btn').addEventListener('click', handlePrint);
优化建议
- 心跳机制:添加心跳保持连接活跃
// 在构造函数中添加
this.heartbeatInterval = setInterval(() => {
if (this.socket?.readyState === WebSocket.OPEN) {
this.socket.send(JSON.stringify({ type: 'heartbeat' }));
}
}, 30000);
- 连接状态通知:提供连接状态变更回调
// 添加状态监听
this.onStatusChange = null;
// 状态变更时
const notifyStatus = (status) => {
if (this.onStatusChange) {
this.onStatusChange(status);
}
};
// 在onopen/onclose/onerror中调用notifyStatus
- 打印结果回调:支持打印结果返回
print(data, callback) {
const task = { data, callback };
this.queue.push(task);
// ...其余逻辑
}
// 在onmessage中处理响应时调用callback
这种实现方式避免了每次打印都创建新连接,提高了效率并减少了服务器压力,同时保证了打印任务的可靠性。