Vue中
第一步：安裝插件
// 注意：客戶端和服務端版本一定要兼容，盡量一樣
// 我的 nodejs 和 vue 中都是 4.5.4 版本
npm i socket.io-client -S
第二步：組件中引入使用
<template>
<div>
<el-button @click="handleEmit">發(fā)送</el-button>
</div>
</template>
<script setup lang='ts'>
import { io } from "socket.io-client";
const socket = io('http://localhost:6789', {
autoConnect: true, // 自動連接
})
const handleEmit = () => {
// 向后臺發(fā)送信息， response：響應信息
socket.emit('chatMessage', 'test-value', (response: any) => {
console.log(response, '發(fā)送消息，接收發(fā)送成功響應信息');
});
}
// 實時接收后臺返回的數(shù)據(jù)
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');
});
文章來源地址http://www.zghlxwxcb.cn/news/detail-543546.html
文章來源：http://www.zghlxwxcb.cn/news/detail-543546.html
到了這里，關于超詳細--vue3中使用socket.io-client + nodejs使用socket.io 實現(xiàn)實時通信的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
