原生 nodejs 結合 Socket.io 實現伺服器和客戶端的相互通訊

阿新 • • 發佈：2020-07-11

1、安裝 Socket.io

網址:http://socket.io/

npm install socket.io

2、寫原生的 JS，搭建一個伺服器，server 建立好之後，建立一個 io 物件。

var http=require('http');

var fs=require('fs');  /*fs內建的模組*/

var app=http.createServer(function(req,res){
    //載入靜態頁面
    fs.readFile('app.html',function(err,data){

        res.writeHead( 
200,{"Content-Type":"text/html;charset='utf-8'"});
        res.end(data);
    })
})

//引入socket.io
var io = require('socket.io')(app);

io.on('connection', function (socket) {

    console.log('伺服器建立連線了');
});




app.listen(3000);


/*使用socket.io
1.安裝

 npm install socket.io

 2、引入建立連線

 var io = require('socket.io')(app);


 io.on('connection', function (socket) {

    console.log('伺服器建立連線了');
 });

3、在客戶端 html裡面引入js

 http://localhost:3000/socket.io/socket.io.js

*  
*/

製作一個index頁面，這個頁面中，必須引用祕密js檔案。呼叫io函式，取得socket 物件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>

    <script>

        var 
 socket = io('http://localhost:3000/');  /*和伺服器建立連線*/

    </script>
</head>
<body>
客戶端

<button id="button">給伺服器傳送資料</button>


</body>
</html>

3、伺服器端通過 emit 廣播，通過 on 接收廣播

app.js

var http=require('http');

var fs=require('fs');  /*fs內建的模組*/

var app=http.createServer(function(req,res){
    //載入靜態頁面
    fs.readFile('app.html',function(err,data){

        res.writeHead(200,{"Content-Type":"text/html;charset='utf-8'"});
        res.end(data);
    })
})

//引入socket.io
var io = require('socket.io')(app);

io.on('connection', function (socket) {

    console.log('伺服器建立連線了');

    //伺服器獲取客戶端廣播的資料

    socket.on('addcart',function(data){

        console.log(data);

        //伺服器給客戶端傳送資料

        //socket.emit();   /*誰給我發信息我把資訊廣播給誰*/

        //io.emit() ;   /*群發  給所有連線伺服器的客戶都廣播資料*/


        //socket.emit('to-client','我是伺服器的資料'+data.client);

        io.emit('to-client','我是伺服器的資料'+data.client)

    })

});




app.listen(3000);


/*使用socket.io
1.安裝

 npm install socket.io

 2、引入建立連線

 var io = require('socket.io')(app);


 io.on('connection', function (socket) {

    console.log('伺服器建立連線了');
 });

3、在客戶端 html裡面引入js

 http://localhost:3000/socket.io/socket.io.js





* */

app.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>

    <script>

        var socket = io('http://localhost:3000/');  /*和伺服器建立連線*/


        window.onload=function(){

            var btn=document.getElementById('button');

            btn.onclick= function () {
                //客戶端給伺服器傳送資料

                socket.emit('addcart',{
                    client:'我是客戶端的資料'
                })

            }


            //監聽伺服器的廣播
            socket.on('to-client',function(data){

                console.log(data)
            })

        }

    </script>
</head>
<body>
客戶端

<button id="button">給伺服器傳送資料</button>


</body>
</html>