Socket.io のインスタントメッセージングフロントエンドが Node とどのように連携するか-jsチュートリアル-php.cn

Socket.io のインスタントメッセージングフロントエンドが Node とどのように連携するか

醉折花枝作酒筹

リリース： 2021-04-23 09:16:49

転載

1843 人が閲覧しました

この記事では、socket.io インスタントメッセージングフロントエンドの Node と連携する方法について詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Socket.io のインスタントメッセージングフロントエンドが Node とどのように連携するか

まずはエフェクトを見てみましょう。ははは、まだ小さいですね
Socket.io のインスタントメッセージングフロントエンドが Node とどのように連携するか

まず、
新しいフォルダーを作成する必要があります
そして、package.json ファイルをすばやく生成します

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

ログイン後にコピー

npm i express
npm i socket.io

ログイン後にコピー

新しい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)})

ログイン後にコピー

現在のファイルの場所にCmdを実行します

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

ログイン後にコピー

正常に開始します

Socket.io のインスタントメッセージングフロントエンドが Node とどのように連携するか

Socket.io のインスタントメッセージングフロントエンドが Node とどのように連携するか
をブラウザで見ても問題ありません。次に、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')})

ログイン後にコピー

フロントエンド 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>

ログイン後にコピー

サービスを開始すると、フロントエンドページが自動的にバックエンドサービスにリンクされ、リンクが作成されます。 webEvent イベントが正常にトリガーされます (名前は自分で定義できます)。フロントとバックは統一する必要があります)、フロントエンドは webEvent イベントをリッスンしてサーバーから送信されたコンテンツを取得し、アラートを通じて表示します。

わかりました、上記は問題なく、以下は理解しやすいです:

以下で実装する関数は、入力入力ボックスに何かを入力し、それをサーバーに渡すことです。サーバーは配列を返し、フロントエンドはそれを Page

//もちろん関数を学ぶためだけなので、例は気にしないでください

フロントエンドの 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>

ログイン後にコピー

サーバー

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));
    })})

ログイン後にコピー

ページを開いたら、入力に値を入力し、ボタンをクリックしてsendFun関数をトリガーし、カスタムイベントsendFunEventをトリガーして、入力値をサーバーに送信します。サーバーは sendFunEvent イベントをリッスンし、データを配列にプッシュし、sendFunEventCallBack イベントをトリガーして、配列を JSON 文字列として渡します。フロントエンドに、フロントエンドは sendFunEventCallBack イベントをリッスンし、配列を取得し、JSON をシリアル化し、データをページにループします。これがプロセス全体です。

リアルタイムの更新やチャットのために複数のフロントエンドページを開いてください。

[推奨学習: JavaScript 上級チュートリアル]

以上がSocket.io のインスタントメッセージングフロントエンドが Node とどのように連携するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。