vue-socket.io

1、服务器

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

npm init -y

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

npm i express@4.18.1

下载好socketio

npm i socket.io@4.5.1

编写好相应的代码：

index.js文件：

这里写了一些跨域的配置，监听的端口号为3030

const app = require('express')()
const server = require('http').Server(app)
const io = require('socket.io')(server, { cors: true })
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Origin,X-Requested-With,Accept,Content-type')
  res.header('Access-Control-Allow-Credentials', true)
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  res.header('Content-Type', 'application/json;charset=utf-8')
  if (req.method.toLowerCase() == 'options') res.sendStatus(200)
  else next()
})

server.listen(3030, () => {
  console.log('listening on http://localhost:3030')
})

io.on('connect', (socket) => {
  console.log('有人连接成功了')
  socket.on('my other event', function (data) {
    console.log(data)
    socket.emit('news', data)
  })
  socket.emit('open', {data:'恭喜你收到了信息'})

  // 监听客户端断开
  socket.on('disconnect', () => {
    console.log('客户端断开')
  })
})

connect监听是否有人连接，如果客户端有人连接了就会触发回调，socket就会收到一些所需的事件触发

2、客户端

在 vue2.x 项目里安装

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

在main.js里面引入添加

// 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:3030', {
      autoConnect: false // 取消自动连接     
    }),
    extraHeaders: { 'Access-Control-Allow-Origin': '*' }
  })
)

写一个测试页面

<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('my other event', { my: 'data' })
    }
  },
  sockets: {
    connecting() {
      console.log('正在连接')
    },
    disconnect() {
      console.log('Socket 断开')
    },
    connect_failed() {
      console.log('连接失败')
    },
    connect() {
      console.log('socket connected')
    },
    news(data) {
      console.log(data)
    },
    open(data) {
      console.log(data)
    }
  }
}
</script>

3、使用

1、启动服务端

node index.js

2、启动客户端

npm run serve

页面会出现两个按钮，按下第一个就会开始连接，这时候服务器就会打印有人连接了，点击发送消息就会触发this.$socket.emit(‘my other event’, { my: ‘data’ })第一个参数就是需要响应服务端的名称，第二个就是我们传递的数据，这时候服务端收到数据就会打印在终端：

socket.on('my other event', function (data) {
    console.log(data)
    socket.emit('news', data)
  })

这时候服务端触发 socket.emit(‘news’, data)第一个参数就是给到客户端的名称，第二个就是上一个函数收到的结果，这里是原封不动返回出去，到了客户端里面再sockets这个对象里面就可以写上’new’的函数来接收，参数就是服务器给我们的数据，这里直接打印在控制台。

注意：io.emit是群发，类似聊天群发送信息