在vue2.x里面简单使用socketio_vue2 vue-socket.io-优快云博客

本文链接：https://blog.youkuaiyun.com/cxy_xss/article/details/127472020

本文介绍了如何在Vue2.x项目中使用SocketIO进行实时通信。通过讲解服务端和客户端的设置，展示了如何建立连接并实现消息推送。在服务端使用Express和Socket.IO，客户端则在Vue中引入相应库，实现双向通信，让前端不再被动等待服务器响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

首先来了解一下什么是socketio：

使用流行的Web应用程序堆栈（如LAMP（PHP））编写聊天应用程序通常非常困难。它涉及轮询服务器以查找更改，跟踪时间戳，并且它比应有的速度慢得多。传统上，套接字是构建大多数实时聊天系统的解决方案，在客户端和服务器之间提供双向通信通道。这意味着服务器可以将消息推送到客户端。每当您编写聊天消息时，其想法是服务器将获取它并将其推送到所有其他连接的客户端。

简单的来说就是一般的逻辑就是服务器响应客户端，而socketio基于webstorm实现了服务端推送到其他的客户端，不再处于被动的局面。

服务端

新建好文件夹，打开终端输入：

npm init -y

初始好包之后下载好express，在官网有传统的http，这里以express来演示：

npm i express

下载好socketio

npm i socket.io@4.5.1

编写好相应的代码官方示例中有：

const express = require("express");
const app = express();
const { createServer } = require("http");
const { Server } = require("socket.io");
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "*",
  },
});

io.on("connection", socket => {
  console.log("有客户端连进来了:" + socket.id);
  socket.on("Mytext", function (data) {
    console.log(data);
    io.emit("Mytext", "成功了");
  });
});

httpServer.listen(3000, () => {
  console.log("监听中...");
});

客户端

在vue2.x里面我们同样要下载包：

npm i socket.io-client@3.1.0 vue-socket.io@3.0.10

在入口文件里面引入：

// 引入socket.io
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

Vue.use(
  new VueSocketIO({
    debug: false,
    connection: SocketIO('http://127.0.0.1:3000', {
      autoConnect: false // 取消自动连接     
    }),
    extraHeaders: { 'Access-Control-Allow-Origin': '*' }
  })
)

在一个干净的页面书写vue：

<template>
  <div class="wrap">
    <button @click="connected">连接Socket</button>
    <button @click="socketSendmsg">发送数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    connected() {
      this.$socket.open() // 开始连接socket
    },
    socketSendmsg() {
      this.$socket.emit('Mytext','收到没')
    }
  },
  sockets: {
    connecting() {
      console.log('正在连接')
    },
    disconnect() {
      console.log('Socket 断开')
    },
    connect_failed() {
      console.log('连接失败')
    },
    connect() {
      console.log('socket connected')
    },
    Mytext(data) {
      console.log(data)
    },
  }
}
</script>