Maison > Article > interface Web > Comment l'interface de messagerie instantanée de socket.io coopère avec Node

Comment l'interface de messagerie instantanée de socket.io coopère avec Node

醉折花枝作酒筹avant: 2021-04-23 09:16:491750parcourir

Cet article vous donnera une introduction détaillée à la méthode frontale de messagerie instantanée socket.io pour coopérer avec Node. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Regardez d'abord l'effet, hahaha c'est encore si petit
Comment linterface de messagerie instantanée de socket.io coopère avec Node

Nous devons d'abord
créer un nouveau dossier
🎜> et générer rapidement un fichier package.json

npm init -y  //生成一个package.json

npm i express
npm i socket.io

Créer un nouveau fichier serverRoom.js

const express = require(&#39;express&#39;)const app = express()let port =3000app.get(&#39;/&#39;,(req,res,next)=>{
    res.writeHead(200, { &#39;Content-type&#39;: &#39;text/html;charset=utf-8&#39; })
    res.end(&#39;欢迎来到express&#39;)
    next()})const server = app.listen(port,()=>{console.log(&#39;成功启动express服务,端口号是&#39;+port)})

À l'emplacement actuel du fichier cmd

node serverRoom.js  
//或者使用  快速更新serverRoom.js的变化 同步到当前打开的服务器
//可以通过 npm i nodemon -g 下载到全局 使用很是方便 不亦乐乎
nodemon serverRoom.js

Démarrer avec succès

Comment linterface de messagerie instantanée de socket.io coopère avec Node
Ce n'est pas un problème de vérifier

Comment linterface de messagerie instantanée de socket.io coopère avec Node
dans le navigateur. Ensuite, nous continuons à écrire serverRoom.js

const express = require(&#39;express&#39;)const app = express()let port =3000app.get(&#39;/&#39;,(req,res,next)=>{
    res.writeHead(200, { &#39;Content-type&#39;: &#39;text/html;charset=utf-8&#39; })
    res.end(&#39;欢迎来到express&#39;)
    next()})const server = app.listen(port,()=>{console.log(&#39;成功启动express服务,端口号是&#39;+port)})//引入socket.io传入服务器对象 让socket.io注入到web网页服务const io = require('socket.io')(server);io.on('connect',(websocketObj)=>{  //connect 固定的  
    //链接成功后立即触发webEvent事件
    websocketObj.emit('webEvent','恭喜链接websocket服务成功：目前链接的地址为：http://127.0.0.1:3000')})

front-end html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 通过script的方式引入 soctke.io -->
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <!-- 为了操作dom方便我也引入了jq -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <title>myWebsocket</title></head><body>
    <p class="myBox">
        <input class="inp" type="text"> <button onclick="sendFun()">点我</button>
    </p>
    <script>
        //页面打开自动链接 http://localhost:3000 后端服务
        let mySocket = io("http://localhost:3000") //直接写后端服务地址
        //一直在监听webEvent 这个事件
        mySocket.on(&#39;webEvent&#39;, (res) => {
            window.alert(res)
        })
        //获取input的输入内容//将来传给服务器
        function sendFun() {
            console.log($(&#39;.myBox>.inp&#39;).val())
        }
    </script></body></html>

Lorsque le service est démarré, la page front-end sera automatiquement liée à notre service back-end, et le lien déclenchera avec succès l'événement webEvent (le nom peut être défini par vous-même, le recto et le verso doivent être unifiés), le front-end écoute l'événement webEvent pour obtenir le contenu envoyé par le serveur et l'affiche via alerte.

D'accord, ce qui précède est très bien et ce qui suit est facile à comprendre :

La fonction à implémenter ci-dessous est de saisir quelque chose dans la zone de saisie et de le transmettre au serveur. renvoie un tableau et le front-end l'affiche dans Page

//Bien sûr, c'est juste pour apprendre la fonction, ne vous souciez pas des exemples

Regardez le front-end Html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 通过script的方式引入 soctke.io -->
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <!-- 为了操作dom方便我也引入了jq -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <title>myWebsocket</title></head><body>
    <p class="myBox">
        <input class="inp" type="text"> <button onclick="sendFun()">点我</button>
        <p class="myBoxChild"></p>
    </p>
    <script>
        //页面打开自动链接 http://localhost:3000 后端服务
        let mySocket = io("http://localhost:3000") //直接写后端服务地址
        //一直在监听webEvent 这个事件
        mySocket.on(&#39;webEvent&#39;, (res) => {
            window.alert(res)
        })
        mySocket.on(&#39;sendFunEventCallBack&#39;, (res) => {
            console.log(res, &#39;sendFunEventCallBackRes&#39;)
            let data = JSON.parse(res)
            let str = &#39;&#39;
            for (let i = 0; i < data.length; i++) {
                str += `<p>${data[i]}</p>`
            }
            $(&#39;.myBoxChild&#39;)[0].innerHTML = str        })

        //获取input的输入内容//将来传给服务器
        function sendFun() {
            if ($(&#39;.myBox>.inp&#39;).val() != &#39;&#39;) {
                mySocket.emit(&#39;sendFunEvent&#39;, $(&#39;.myBox>.inp&#39;).val())
                $(&#39;.myBox>.inp&#39;)[0].value = &#39;&#39;
            } else {
                alert(&#39;输入字符&#39;)
                return
            }
        }
    </script></body></html>

Côté serveur

const express = require(&#39;express&#39;)const app = express()let port =3000app.get(&#39;/&#39;,(req,res,next)=>{
    res.writeHead(200, { &#39;Content-type&#39;: &#39;text/html;charset=utf-8&#39; })
    res.end(&#39;欢迎来到express&#39;)
    next()})const server = app.listen(port,()=>{console.log(&#39;成功启动express服务,端口号是&#39;+port)})//引入socket.io传入服务器对象 让socket.io注入到web网页服务const io = require('socket.io')(server);let arr=['恭喜链接websocket服务成功：目前链接的地址为：http://127.0.0.1:3000']io.on('connect',(websocketObj)=>{  //connect 固定的  
    //链接成功后立即触发webEvent事件
    websocketObj.emit('webEvent',JSON.stringify(arr));
    //监听前端触发的 sendFunEvent  事件 
    websocketObj.on('sendFunEvent',(webres)=>{
        arr.push(webres)
        //触发所以的 sendFunEventCallBack 事件  让前端监听
        io.sockets.emit("sendFunEventCallBack", JSON.stringify(arr));
    })})

Après avoir ouvert la page, entrez une valeur dans l'entrée, cliquez sur le bouton pour déclencher la fonction sendFun, déclenchez l'événement personnalisé sendFunEvent et transmettez la valeur d'entrée au serveur. Le serveur écoute l'événement sendFunEvent, pousse les données dans le tableau et déclenche l'événement sendFunEventCallBack, en transmettant le tableau sous forme de chaîne JSON. Au front-end, le front-end écoute l'événement sendFunEventCallBack, obtient le tableau, JSON sérialise, et boucle les données sur la page. C'est l'ensemble du processus.

Ouvrez plusieurs pages frontales pour des mises à jour et des discussions en temps réel.

[Apprentissage recommandé : Tutoriel JavaScript avancé]

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!

JavaScript json html 字符串循环 JS 事件 alert input

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Vous faire comprendre la méthode Object.defineProperty() en trois minutesArticle suivant：Vous faire comprendre la méthode Object.defineProperty() en trois minutes

Articles Liés

Voir plus