超详细--vue3中使用socket.io-client + nodejs使用socket.io 实现实时通信-Toy模板网

这篇具有很好参考价值的文章主要介绍了超详细--vue3中使用socket.io-client + nodejs使用socket.io 实现实时通信。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue中

第一步：安装插件

// 注意：客户端和服务端版本一定要兼容，尽量一样
// 我的 nodejs 和 vue 中都是 4.5.4 版本
npm i socket.io-client -S

第二步：组件中引入使用

<template>
  <div>
    <el-button @click="handleEmit">发送</el-button>
  </div>
</template>
<script setup lang='ts'>
import { io } from "socket.io-client";

const socket = io('http://localhost:6789', {
  autoConnect: true,   // 自动连接     
})

const handleEmit = () => {
  // 向后台发送信息， response：响应信息
  socket.emit('chatMessage', 'test-value', (response: any) => {
    console.log(response, '发送消息，接收发送成功响应信息');
  });
}
// 实时接收后台返回的数据
socket.on('chat message', function(msg) {
  console.log('接收消息', msg);
});

</script>

nodejs中

第一步：安装插件

// 4.5.4 版本
npm i socket.io --save   
npm i express --save

第二步：在文件中引入使用

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server, {
  cors: {
    origin: ['http://localhost:8999']  // 配置客户端可跨域地址
  }
});
io.on('connection', (socket) => {
  console.log('接收到客户端请求');
  socket.on('chatMessage', (msg, callback) => {
    console.log('客户端请求信息', msg);
    callback('你请求成功了')
    io.emit('chat message', {
      status: 200,
      data: 'result'
    });
  });
})

server.listen(6789, () => {
  console.log('listening on *:6789');
});