How to use WebSocket and Socket.IO to achieve real-time communication under Vue?

Vue is a popular front-end framework with excellent rendering performance and rich ecosystem. In web application development, real-time communication is a very common requirement, and WebSocket and Socket.IO are two commonly used implementation methods. This article will introduce how to use WebSocket and Socket.IO to achieve real-time communication in Vue.

1. Basic use of WebSocket

WebSocket is a protocol that can achieve two-way communication between the client and the server. WebSocket API can be used in Vue to achieve real-time communication. The following is a simple WebSocket example:

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已关闭');

This example creates a WebSocket object and connects to the server. After the connection is successful, the ws.onopen callback function is automatically executed and a message is sent. After receiving the message returned from the server, execute the ws.onmessage callback function. When closing the WebSocket object, execute the ws.onclose callback function.

2. Combined use of WebSocket and Vue

When using WebSocket in Vue, the WebSocket object can be encapsulated into a Vue plug-in. Here is a simple WebSocket plug-in example:

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 plug-in can send messages by calling the this.$ws.send(message) method, by calling this.$ws. The close() method closes the WebSocket connection.

3. Basic use of Socket.IO

Socket.IO is a framework based on the WebSocket communication protocol. It can provide more convenient functions based on WebSocket, such as disconnection reconnection and heartbeat. Detection, broadcasting, etc.

The following is a simple Socket.IO example:

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连接已断开'));

This example creates a Socket.IO client object through the io() method and connects to the server . After the connection is successful, the socket.on('connect', ...) callback function is automatically executed and a message is sent. After receiving the message returned from the server, execute the socket.on('message', ...) callback function. When closing the Socket.IO object, execute the socket.on('disconnect', ...) callback function.

4. Combination use of Socket.IO and Vue

When using Socket.IO in Vue, the Socket.IO object can be encapsulated into a Vue plug-in. The following is a simple Socket.IO plug-in example:

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 plug-in can send messages by calling the this.$socket.emit(eventName, data) method, by calling this The .$socket.on(eventName, handler) method listens to messages sent by the server, and cancels event monitoring by calling the this.$socket.off(eventName) method.

5. Summary

This article introduces how to use WebSocket and Socket.IO to achieve real-time communication in Vue. WebSocket and Socket.IO are both commonly used implementation methods, among which Socket.IO provides richer functions. WebSocket and Socket.IO objects are encapsulated into plug-ins in Vue, which can be easily called in Vue components.

The above is the detailed content of How to use WebSocket and Socket.IO to achieve real-time communication under Vue?. For more information, please follow other related articles on the PHP Chinese website!