vue是一款流行的前端框架，其具有优秀的渲染性能和丰富的生态圈。在web应用开发中，实时通讯是非常常见的需求，websocket和socket.io是两种常用的实现方式。本文将介绍如何在vue中使用websocket和socket.io实现实时通讯。
一、WebSocket基础使用
WebSocket是一种协议，可以在客户端和服务器之间实现双向通讯。Vue中可以使用WebSocket API来实现实时通讯。下面是一个简单的WebSocket示例：
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
console.log('WebSocket已连接');
ws.send('Hello');
};
ws.onmessage = event => {
console.log(`收到消息：${event.data}`);
};
ws.onclose = () => console.log('WebSocket已关闭');该示例创建了一个WebSocket对象，并连接到服务器。在连接成功后，自动执行ws.onopen回调函数，并发送一条消息。在收到服务器返回的消息后，执行ws.onmessage回调函数。在关闭WebSocket对象时，执行ws.onclose回调函数。
二、WebSocket和Vue的结合使用
立即学习“前端免费学习笔记（深入）”；
在Vue中使用WebSocket，可以将WebSocket对象封装成Vue插件。下面是一个简单的WebSocket插件示例：
class WebSocketPlugin {
constructor({ url, onOpen, onClose, onMessage }) {
this.ws = new WebSocket(url);
this.ws.onopen = () => onOpen && onOpen();
this.ws.onclose = () => onClose && onClose();
this.ws.onmessage = event => onMessage && onMessage(event.data);
}
send(message) {
this.ws.send(message);
}
close() {
this.ws.close();
}
}
export default {
install: (Vue, options) => {
const { url, onOpen, onClose, onMessage } = options;
const ws = new WebSocketPlugin({ url, onOpen, onClose, onMessage });
Vue.prototype.$ws = ws;
}
};该插件可以通过调用this.$ws.send(message)方法发送消息，通过调用this.$ws.close()方法关闭WebSocket连接。
三、Socket.IO基础使用
Socket.IO是基于WebSocket通讯协议的一个框架，可以在WebSocket的基础上提供更方便的功能，如断线重连、心跳检测、广播等。
下面是一个简单的Socket.IO示例：
import io from 'socket.io-client';
const socket = io('http://localhost:8080');
socket.on('connect', () => {
console.log('Socket.IO连接已建立');
socket.emit('hello', 'world');
});
socket.on('message', message => {
console.log(`收到消息：${message}`);
});
socket.on('disconnect', () => console.log('Socket.IO连接已断开'));该示例通过io()方法创建了一个Socket.IO客户端对象，并连接到服务器。在连接成功后，自动执行socket.on('connect', ...)回调函数，并发送一条消息。在收到服务器返回的消息后，执行socket.on('message', ...)回调函数。在关闭Socket.IO对象时，执行socket.on('disconnect', ...)回调函数。
四、Socket.IO和Vue的结合使用
在Vue中使用Socket.IO，可以将Socket.IO对象封装成Vue插件。下面是一个简单的Socket.IO插件示例：
class SocketIoPlugin {
constructor({ url, options = {}, onConnect, onDisconnect }) {
this.socket = io(url, options);
this.socket.on('connect', () => onConnect && onConnect());
this.socket.on('disconnect', () => onDisconnect && onDisconnect());
}
on(eventName, handler) {
this.socket.on(eventName, handler);
}
emit(eventName, data) {
this.socket.emit(eventName, data);
}
off(eventName) {
this.socket.off(eventName);
}
}
export default {
install: (Vue, options) => {
const { url, options: socketOptions, onConnect, onDisconnect } = options;
const socket = new SocketIoPlugin({ url, options: socketOptions, onConnect, onDisconnect });
Vue.prototype.$socket = socket;
}
};该插件可以通过调用this.$socket.emit(eventName, data)方法发送消息，通过调用this.$socket.on(eventName, handler)方法监听服务器发来的消息，通过调用this.$socket.off(eventName)方法取消事件监听。
五、小结
本文介绍了如何在Vue中使用WebSocket和Socket.IO实现实时通讯。WebSocket和Socket.IO都是常用的实现方式，其中Socket.IO提供了更丰富的功能。在Vue中将WebSocket和Socket.IO对象封装成插件，可以方便地在Vue组件中调用。
