快捷導(dǎo)航

vue3 使用socket的完整代碼

更新時(shí)間：2024年03月04日 10:06:15 作者：就是個(gè)名稱

這篇文章主要介紹了vue3 使用socket的完整代碼,包括vue3客戶端和服務(wù)端的實(shí)例講解,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

Vue3 客戶端

首先我們下載依賴 socket.io-client

npm install socket.io-client --save

socket.js

import io from 'socket.io-client'
// 鏈接 服務(wù)端
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; // 默認(rèn)false， 在和java調(diào)試中，需要打開鏈接 值變?yōu)閠rue
            socket.on("connect", () => {
                console.log("socketio-connect");
            });
        });
    }
})

然后我們啟動(dòng)服務(wù) 前后臺(tái)都要起，這時(shí)候我們看到控制臺(tái)和服務(wù)端都有打印結(jié)果，就說明連接成功了。

服務(wù)端

配置服務(wù)端 socket server.js （我這里是用node寫的， java同理）

如果使用 express 需要在安裝下 express

npm install express --seve

npm install socket.io --save

server.js 服務(wù)端

const express = require('express')
let fs = require('fs')
const app = express()
let port = 3002
    // 讀取文件
const server = app.listen(port, () => {
console.log('成功啟動(dòng)express服務(wù),端口號(hào)是' + port)
    })
//引入socket.io傳入服務(wù)器對(duì)象 讓socket.io注入到web網(wǎng)頁服務(wù)
const io = require('socket.io')(server);
io.on('connection', function(socket) {
    console.log('初始化');
    // 接受 客戶端 message事件
    socket.on("message", function (msg) {
            // 服務(wù)端推送客戶端 客戶端也要用 socket.on("message",(data)=>{}) 接收
            io.emit("message", msg) //服務(wù)器通過廣播將新用戶發(fā)送給全體群聊成員
    })
        //監(jiān)聽log事件
    socket.on("log", function (msg) {
        // 服務(wù)端推送客戶端
        io.emit("log", msg) //服務(wù)器通過廣播將新用戶發(fā)送給全體群聊成員
    })
});

然后我們就可以實(shí)現(xiàn)socket 通訊了

完整代碼

server,js

const express = require('express')
const app = express()
let port = 3002
const server = app.listen(port, () => {
        console.log('成功啟動(dòng)express服務(wù),端口號(hào)是' + port)
    })
    //引入socket.io傳入服務(wù)器對(duì)象 讓socket.io注入到web網(wǎng)頁服務(wù)
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
    })
});

socket.js

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

cheshi.vue

<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; // 默認(rèn)false， 在和java調(diào)試中，需要打開鏈接 值變?yōu)閠rue
        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>

結(jié)果打印