node.js+vite+vue3+socket.io

前言: 前端自己架起服务器  给自己造点东西玩玩吧

1.搭建起服务(node.js)

  下载依赖

npm i socket.io cors

const http = require("http");
const express = require("express");
const app = express();
const cors = require("cors");
let timer = null;

// 创建一个HTTP服务器
const server = http.createServer(app);
const io = require("socket.io")(server);

// 配置
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(express.static("./public"));
app.use(cors());

// 监听连接事件
io.on("connection", (socket) => {
  console.log("一个用户链接了");

  // 发送欢迎消息给新连接的客户端
  // 定时发送心跳
  timer = setInterval(() => {
    // socket.emit('heartbeat');
    console.log("Welcome to the server!");
    socket.emit("message", "Welcome to the server!");
  }, 3000);
  // socket.emit("message", "Welcome to the server!");

  socket.on("test", (data) => {
    console.log("test:", data);

    // 在收到foo事件后，向客户端发送一个bar事件
    socket.emit("test", "收到test消息了!!");
  });

  // 监听断开连接事件
  socket.on("disconnect", () => {
    console.log("断开链接了");
    clearInterval(timer);
    timer = null;
  });

  // 监听客户端发送的foo事件
  socket.on("foo", (data) => {
    console.log("Foo event received:", data);
    // 在收到foo事件后，向客户端发送一个bar事件
    socket.emit("bar", "Hello from the server!");
  });
});

// 在服务器关闭时清除所有定时器
function clearTimers() {
    clearInterval(timer);
}

// 监听服务器关闭事件
server.on('close', () => {
  console.log('Server is closing');
  clearTimers();
});


server.listen("8010", () => {
  console.log("8010端口启动");
});

nodemon .\app.js 运行起来就行了  至于想传 数据  自己整就行了 

2.前端内容 (vite+vue3)

npm i socket.io-client

    1.在src根目录下面建起socket.js文件夹

        

import { reactive } from "vue";
import { io } from "socket.io-client";

export const state = reactive({
  num:1,
  connected: true,
  fooEvents: [],
  barEvents: [],
});
// 下面自己根据环境的判断 给地址就行了
const URL = process.env.NODE_ENV === "production"? "http://localhost:8010": "http://localhost:8010";

export const socket = io(URL, {
  query: {},
  transports: ["websocket", "polling"],
  connected: state.connected, // 是否自动重连
  reconnectionAttempts: 3, // 重连尝试次数
  reconnectionDelay: 1000, // 重连延迟时间（毫秒）
  reconnectionDelayMax: 5000, // 最大重连延迟时间（毫秒）
  pingTimeout: 5000, // 5秒未收到 'pong' 则认为连接断开
  pingInterval: 2000, // 2秒发送一次心跳
  pingMsg: 'custom-ping', // 使用自定义的心跳消息
});

socket.on("connect", () => {
// socket.on("connection", () => {
  state.connected = true;
  console.log("链接成功");
});

socket.on("disconnect", () => {
  state.connected = false;
});

socket.on("bar", (...args) => {
  state.barEvents.push(args);
});

// 监听来自服务器的消息事件
socket.on('message', (message) => {
  // 处理收到的消息，例如将其显示在页面上
  console.log('收到消息:', message);
});

  2.在需要用到socket的组件 引入就行了

<script setup>
import { watch,ref,onUnmounted, computed, onMounted } from 'vue'
import { state, socket } from "@/socket.js";

defineProps({
  msg: String,
})

// console.log(state,'state');


const connected = computed(() => {
  return state.num
})

const count = ref(0)

const addone = ()=>{
  state.num +=1;
  console.log(state,'state');
}

watch(()=>state.num,(newval,oldval)=>{
  console.log(newval,oldval,'newval');
  socket.emit('test',newval)
},{deep:true})

onMounted(() => {
  // console.log(socket, 'socket');
  socket.on();
})

onUnmounted(() => {
  // 在组件销毁时取消注册 Socket.IO 监听器
  socket.off("connect");
  socket.off("disconnect");
  socket.off("foo");
  socket.off("bar");
  socket.off("message");
});
</script>

<template>
  <h1>State: {{ connected }}</h1>
  <button @click="addone">num +1</button>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>