vue3 使用socket的完整代码

npm install socket.io-client --save

import io from 'socket.io-client'
// 链接 服务端
const socket = io('http://localhost:3002', {
    query: {},
    transports: ['websocket', 'polling'],
})
export default socket

import { defineComponent, onMounted, computed, ref } from "vue";
import socket from "@/utils/socket.js";
export default defineComponent({
    name: "operation",
    setup() {
        onMounted(() => {
            // socket.connected = true; // 默认false， 在和java调试中，需要打开链接 值变为true
            socket.on("connect", () => {
                console.log("socketio-connect");
            });
        });
    }
})

npm install express --seve

npm install socket.io --save

const express = require('express')
let fs = require('fs')
const app = express()
let port = 3002
    // 读取文件
const server = app.listen(port, () => {
console.log('成功启动express服务,端口号是' + port)
    })
//引入socket.io传入服务器对象 让socket.io注入到web网页服务
const io = require('socket.io')(server);
io.on('connection', function(socket) {
    console.log('初始化');
    // 接受 客户端 message事件
    socket.on("message", function (msg) {
            // 服务端推送客户端 客户端也要用 socket.on("message",(data)=>{}) 接收
            io.emit("message", msg) //服务器通过广播将新用户发送给全体群聊成员
    })
        //监听log事件
    socket.on("log", function (msg) {
        // 服务端推送客户端
        io.emit("log", msg) //服务器通过广播将新用户发送给全体群聊成员
    })
});

const express = require('express')
const app = express()
let port = 3002
const server = app.listen(port, () => {
        console.log('成功启动express服务,端口号是' + port)
    })
    //引入socket.io传入服务器对象 让socket.io注入到web网页服务
const io = require('socket.io')(server);
let indexSate = 0
let timer = null
io.on('connection', function(socket) {
    console.log('初始化');
    // 初始化
    indexSate = 0
    clearTimeout(timer)
    timer = null
    socket.on("start", function(msg) {
        console.log(msg)
        timer = setInterval(() => {
            io.emit('message', indexSate);
            indexSate++
        }, 1000)
    })
    socket.on("stop", function(msg) {
        console.log(msg)
        clearTimeout(timer)
        timer = null
    })
});

import io from 'socket.io-client'
const socket = io('http://localhost:3002', {
    query: {},
    transports: ['websocket', 'polling'],
})
export default socket

<template>
    <div>
        <el-button size="small" @click="start" type="primary">开始</el-button>
        <el-button size="small" @click="stop" type="primary">暂停</el-button>
        <div></div>
    </div>
</template>
<script>
import { defineComponent, onMounted, computed, ref } from "vue";
import socket from "@/utils/socket.js";
export default defineComponent({
    name: "operation",
    setup() {
        // socket.connected = true; // 默认false， 在和java调试中，需要打开链接 值变为true
        onMounted(() => {
            socket.on("connect", () => {
                console.log("socketio-connect");
            });
        });
        socket.on("message", (data) => {
            console.log(data);
        });
        const start = () => {
            socket.emit("start", "开始");
        };
        const stop = () => {
            socket.emit("stop", "暂停");
        };
        return {
            start,
            stop,
        };
    },
});
</script>
<style lang="less" scoped>
</style>