关于使用soclet-io的简单介绍

1. 前端发送入参通过io实现语音播报

前端通过发送入参，得到响应，然后进行播报

1.1. 前端代码

<template>
  <div>
    <h1>Chat</h1>
    <input
      v-model="message"
      @keyup.enter="sendMessage"
      placeholder="Type a message"
    />
    <div v-if="responseInfo">
      <p>Response Info: {{ responseInfo.info }}</p>
      <p>Response Name: {{ responseInfo.name }}</p>
    </div>
  </div>
</template>

<script>
import { io } from "socket.io-client";

export default {
  data() {
    return {
      socket: null,
      message: "",
      responseInfo: null,
    };
  },
  mounted() {
    this.socket = io("http://localhost:3001");
    this.socket.on("chat response", (data) => {
      console.log("Chat Response:", data);
      this.responseInfo = data.data;
      // 实现语音播报功能
      const utterance = new SpeechSynthesisUtterance(
        `Response info is ${data.data.info}`
      );
      speechSynthesis.speak(utterance);
    });
  },
  methods: {
    sendMessage() {
      // chat message：表示入参字段，this.message是对应的入参内容
      this.socket.emit("chat message", this.message);
      this.message = "";
    },
  },
  beforeUnmount() {
    if (this.socket) {
      this.socket.disconnect();
    }
  },
};
</script>

1.2. node代码

const express = require('express')
const app = express()
const cors = require('cors');
const server = require('http').Server(app)
const io = require('socket.io')(server, {
  cors: {
    origin: 'http://localhost:5173', // Allow requests from this origin
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content-Type'],
    credentials: true
  }
});

server.listen(3001, () => {
  console.log('socketio listening on port 3001')
})

app.use(cors({
  origin: 'http://localhost:5173'
}));

app.use(express.json());

let successCount = 0;

io.on('connection', socket => {
  socket.on('disconnect', () => {
    console.log('user disconnected', new Date())
  })
  socket.on('chat message', msg => {
    console.log('message: ' + msg);
    successCount++;
    socket.emit('chat response', {
      code: 0,
      msg: 'ok',
      data: {
        info: '成功啦' + successCount,
        name: new Date().toISOString()
      }
    });
  });
});

1.3. 示例

2. 前端监听后端的返回数据通过io进行语音播报

2.1. 后端代码

const express = require('express')
const app = express()
const cors = require('cors');
const mysql = require('mysql')
const server = require('http').Server(app)

// 创建数据库连接对象
const db = mysql.createConnection({
  host: "localhost", // 数据库服务器地址
  user: "root", // 数据库用户名
  password: "Aa123456", // 数据库密码
  database: "fe" // 数据库名称
});

const io = require('socket.io')(server, {
  cors: {
    origin: 'http://localhost:5173', // 前端服务地址
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content-Type'],
    credentials: true
  }
});

// 后端响应接口
server.listen(3001, () => {
  console.log('socketio listening on port 3001')
})

// 前端服务地址
app.use(cors({
  origin: 'http://localhost:5173'
}));

app.use(express.json());

let previousData = null; 
function checkDatabaseChanges() {
  db.query('SELECT * FROM `info`', (error, results) => {
    if (error) {
      console.error('Database query error:', error);
      return;
    }
    const changedData = [];
    results.forEach((row, index) => {
      if (!previousData || JSON.stringify(row) !== JSON.stringify(previousData[index])) {
        changedData.push(row);
      }
    });
    previousData = results;
    if (changedData.length > 0) {
      io.emit('database update', changedData);
    }
  });
}
setInterval(checkDatabaseChanges, 5000);

2.2. 前端代码

<template>
  <div>
    <h1>SOCKET-IO 响应练习</h1>
    <div v-if="responseInfo">
      <p>Response Name: {{ responseInfo[0].name }}</p>
      <p>Response Age: {{ responseInfo[0].age }}</p>
    </div>
  </div>
</template>

<script>
import { io } from "socket.io-client";

export default {
  data() {
    return {
      socket: null,
      message: "",
      responseInfo: null,
    };
  },
  mounted() {
    this.socket = io("http://localhost:3001");
    this.socket.on("database update", (data) => {
      console.log("database update:", data);
      if(data) this.responseInfo = data
      const utterance = new SpeechSynthesisUtterance(
        `我的名字是${data[0].name}，我的年龄是${data[0].age}`
      );
      speechSynthesis.speak(utterance);
    });
  },
  beforeUnmount() {
    if (this.socket) {
      this.socket.disconnect();
    }
  },
};
</script>

2.3. 示例