Comment implémenter le chat vocal dans le nœud

Comment implémenter le chat vocal dans node : 1. Utilisez le module nodejs express pour créer un serveur Web ; 2. Créez une connexion https ; 3. Communication en temps réel entre le client et le serveur via "socket.io".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version node-v16.18.0, ordinateur DELL G3

Comment node implémente-t-il le chat vocal ?

Chat vocal basé sur nodejs

Description

Le programme utilise la technologie webRTC basée sur la fonction de discussion de groupe de iamshaunjp et ajoute une fonction de discussion de groupe vocale lorsque d'autres personnes tapent sur le clavier. , un message similaire à WeChat apparaîtra là où l'autre partie tape.

• démo : https://www.php.cn/link/b2fc614266ad3627dca4dc5d37885d58
• code source : https://www.php.cn/link/12a8193db4825679dc9baf49305efe92

Le module nodejs utilisé

• express : Créez un serveur Web express：创建一个web服务器
• https：创建https连接（局域网或者外网webRTC需要https连接，具体见tutoril）
• socket.io：客户端与服务端实时通信

js文件

• chat.js：实现按钮事件的注册、文本数据的发送等
• record.js：实现语音消息的录取、播放、发送等

结构图和流程图

文本通信

详情见public/js/chat.js注释

发送数据

• 进入页面进行与服务器的socket连接
• 客户端输入文本数据
• 客户点击sent按钮，触发click事件，并产生chat事件准备想服务器emit
• soket连接发送给服务器chat事件和客户端产生的数据

接收数据

• socket接受到服务器发送来的data和服务器发送来的chat事件
• 提取data文本
• js在index.html添加文本数据，完成接收数据并显示

语音通信

详情见public/js/record.js注释

• 接受和发送语音数据类似与文本数据的通信
• 利用webRTC获取到用户的视频或者音频转换为blob格式数据，并发送给服务器数据。
• 接受消息时，数据类型是blob格式，对blob数据解析，利用html5的audio标签进行播放

服务器转发数据

客户端发送给服务器数据，服务器触发chat

https : Créez une connexion https (LAN ou webRTC externe nécessite une connexion https, voir tutoril

)socket.io : Communication en temps réel entre le client et le serveur

fichier js

• chat.js  : Réalise l'enregistrement des événements de boutons, l'envoi de données texte, etc.

record.js : Réalise l'enregistrement, la lecture et l'envoi de messages vocaux, etc.

Schémas structurels et organigrammes

🎜🎜🎜🎜🎜Communication textuelle🎜🎜🎜Pour plus de détails, voir l'annotation public/js/chat.js🎜🎜🎜🎜Envoyer des données🎜🎜🎜🎜Entrez dans la page pour communiquer avec le serveur socketConnect 🎜🎜Le client saisit des données textuelles🎜🎜Le client clique sur le bouton envoyé, déclenche l'événement clic et génère l'événement chat pour préparer le serveuremit🎜🎜soketLa connexion envoie les événements de chat au serveur et les données générées par le client🎜🎜 🎜🎜Reçoit des données🎜🎜🎜🎜socketReçoit et envoie au serveur Les données entrantes et l'événement de chat envoyé par le serveur🎜🎜Extraire le texte des données🎜🎜js ajoute des données texte dans index .html, termine la réception des données et leur affichage🎜🎜🎜🎜 Communication vocale🎜🎜🎜Voir le commentaire public/js/record.js pour plus de détails🎜 🎜🎜🎜L'acceptation et l'envoi de données vocales sont similaires à la communication de données textuelles🎜🎜Utiliser webRTC pour obtenir La vidéo ou l'audio de l'utilisateur est converti en données au format blob et envoyé au serveur . 🎜🎜Lors de la réception d'un message, le type de données est au format blob. Les données blob sont analysées et lues à l'aide de la balise audio de html5🎜🎜🎜🎜 Le serveur transmet les données🎜🎜Le client envoie des données au serveur, et le serveur déclenche l'événement chat et envoie les données envoyées par le client à chaque client sous forme de diffusion pour terminer le fonction de discussion de groupe. 🎜🎜🎜🎜Créer un certificat https🎜🎜L'utilisation de webRTC sur localhost ne nécessite pas l'utilisation de https, mais lors de l'utilisation de webRTC sur un réseau local ou un réseau externe, webRTC doit être obligatoirement utilisé. Ici, nous utilisons notre propre certificat généré. pour tester, la méthode de génération spécifique et la méthode de paramétrage https🎜 Référez-vous au blog 🎜 : 🎜🎜🎜Générez votre propre certificat signé (valable 365 jours) 🎜🎜

 openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365

🎜🎜Utilisez express avec connexion https, l'exemple est le suivant : 🎜🎜

  var fs = require('fs'),
    https = require('https'),
    express = require('express'),
    app = express();

    https.createServer({
      key: fs.readFileSync('key.pem'),
      cert: fs.readFileSync('cert.pem')
    }, app).listen(55555);

    app.get('/', function (req, res) {
      res.header('Content-type', 'text/html');
      return res.end('<h1 id="Hello-Secure-World">Hello, Secure World!</h1>');
    });

recommande d'apprendre : "🎜Tutoriel vidéo Node.js🎜" 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!