使用 Socket.io 和 NodeJS 实现实时音频聊天

在Web开发的世界里，实时通信一直是一个至关重要的方面，尤其是在聊天室、游戏、直播等需要即时互动的应用程序中。其中最令人兴奋的领域之一就是实时音频聊天应用程序的开发。JavaScript 库 Socket.io 已成为这一领域的强大工具，使开发人员能够轻松构建可扩展的实时应用程序。

什么是 Socket.io？

Socket.io 是一个 JavaScript 库，可在 Web 客户端和服务器之间实现实时、双向和基于事件的通信。它使用 WebSockets 进行通信，但也为不支持该技术的旧版浏览器提供了回退功能。Socket.io 的魅力在于其简单性和与各种平台无缝集成的能力，使其成为实时 Web 应用程序的首选。

为什么使用 Socket.io 进行音频聊天？

• 实时功能： Socket.io 可促进实时数据传输，这对音频聊天应用至关重要，因为延迟会严重影响用户体验。
• 易于使用： Socket.io 利用其简单的 API 降低了设置 WebSocket 连接的复杂性，使音频流功能的实现更加容易。
• 可扩展性： Socket.io 可高效处理多个连接，确保您的应用程序可随着用户群的增长而扩展。
• 跨平台支持： Socket.io 可在各种平台和设备上运行，为所有用户提供一致的体验。

示例代码

让我们安装服务器，你需要安装 nodejs，然后安装这些库才能开始聊天

npm init -y

npm install express cors socket.io

在 package.json 文件中设置 start 变量，如下所示：

"scripts": {
  "start": "node index.js"
},

创建一个 index.js 文件并将此基本代码粘贴到此处以与其他人进行音频聊天：

// Import dependencies
const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const cors = require('cors');

// Create the app and server
const app = express();
app.use(cors({
    origin: '*' // Allow only the client with entering the url of client
}));
const server = http.createServer(app);
const io = socketIO(server);

app.get("/", (req, res) => {
    res.send("Server is running.");
});

// Handle new socket connections
io.on('connection', (socket) => {

    // Handle incoming audio stream
    socket.on('audioStream', (audioData) => {
        socket.broadcast.emit('audioStream', audioData);
    });

    socket.on('disconnect', () => {
    });
});

// Start the server
const port = process.env.PORT || 3000;
server.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

现在为前端创建 HTML、CSS 和 JS 文件，按自己的需要设计页面，然后粘贴以下代码，以便从客户端向服务器发送音频。这样服务器就可以向其他已连接的用户发送音频。

// Install socket.io-client or directly use cdn
import { io } from 'socket.io-client';


let socket = io("http://localhost:3000", {
    transports: ['websocket'],
    upgrade: false
});

socket.on('connect', () => {
  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
    .then((stream) => {
        var madiaRecorder = new MediaRecorder(stream);
        var audioChunks = [];

        madiaRecorder.addEventListener("dataavailable", function (event) {
            audioChunks.push(event.data);
        });

        madiaRecorder.addEventListener("stop", function () {
            var audioBlob = new Blob(audioChunks);
            audioChunks = [];
            var fileReader = new FileReader();
            fileReader.readAsDataURL(audioBlob);
            fileReader.onloadend = function () {
                var base64String = fileReader.result;
                socket.emit("audioStream", base64String);
            };

            madiaRecorder.start();
            setTimeout(function () {
                madiaRecorder.stop();
            }, 500);
        });

        madiaRecorder.start();
        setTimeout(function () {
            madiaRecorder.stop();
        }, 500);
    })
    .catch((error) => {
        console.error('Error capturing audio.', error);
    });
});

socket.on('audioStream', (audioData) => {
    var newData = audioData.split(";");
    newData[0] = "data:audio/ogg;";
    newData = newData[0] + newData[1];

    var audio = new Audio(newData);
    if (!audio || document.hidden) {
        return;
    }
    audio.play();
});

结论

使用 Socket.io 构建实时音频聊天应用程序是一项令人兴奋的冒险。Socket.io 的实时功能、易用性和可扩展性使其成为此类应用程序的绝佳选择。通过对音频数据、延迟和安全性的精心处理，您可以创建一个高质量的实时音频聊天应用程序，在当今的数字世界中脱颖而出。