node中socket.io的事件使用詳解

2019-11-20 13:43:47

字體：大中小

來源：轉載

供稿：網友

socket.io類庫不但可以相互發送消息,而且還可以通過socket端口對象的emit方法互相發送事件.

emit在之前的事件上說過現在一句話帶過:emit是用來手動觸發事件的.

socket.emit(event,data,function(data1,data2......){
});

在使用emit方法發送事件時,可以再另一端使用socket端口對象的on方法會once方法監聽.

復制代碼代碼如下:

socket.on(event,function(data,fn){
});
socket.once(event,function(data,fn){
})

上面的回調函數中的參數data:對方發送的事件中攜帶的數據,

fn:對方在發送事件時指定的callback回調函數.

案例1:當服務器和客戶端連接后,向客戶端發送一個news事件,事件中攜帶一個對象,該對象的hello屬性值為"你好".在接收到客戶端發送my other event事件時,在控制臺中輸出"服務器端就收到數據"+客戶端發送事件中攜帶的數據.

服務器端代碼,server.js

復制代碼代碼如下:

 var http=require("http");
 var sio=require("socket.io");
 var fs=require("fs");
 var server=http.createServer(function (req,res) {
     res.writeHead(200,{"Content-type":"text/html"});
     res.end(fs.readFileSync("./index.html"));
 });
 server.listen(1337);
 var socket=sio.listen(server);
 socket.on("connection", function (socket) {
     socket.emit("news",{hello:"你好"});
     socket.on("my other event", function (data) {
         console.log("服務器端接受到信息%j",data);
     });
 });

客戶端index.html代碼:

復制代碼代碼如下:

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <script src="/socket.io/socket.io.js"></script>
     <script>
         var socket=io.connect();
         socket.on("news", function (data) {
             console.log(data.hello);
             socket.emit("my other event",{my:"data"});
         });        
     </script>
 </head>
 <body>
 
 </body>

運行結果:、

可以發現一點:執行總是在監聽端,而不是手動執行端.

案例2:在手動觸發對方事件時,指定回調函數.

當客戶端和服務端連接后,向客戶端發送setName事件,事件攜帶"張三",觸發事件時,指定一個回調函數,該回調函數向控制臺輸出2個參數值.

復制代碼代碼如下:

 var http=require("http");
 var sio=require("socket.io");
 var fs=require("fs");
 var server=http.createServer(function (req,res) {
     res.writeHead(200,{"Content-type":"text/html"});
     res.end(fs.readFileSync("./index.html"));
 });
 server.listen(1337);
 var socket=sio.listen(server);
 socket.on("connection", function (socket) {
     socket.emit("setName","張三", function (data1,data2) {
         console.log(data1);
         console.log(data2);
     });
 });

復制代碼代碼如下:

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <script src="/socket.io/socket.io.js"></script>
     <script>
         var socket=io.connect();
         socket.on("setName", function (name,fn) {
            console.log(name);
             fn("李四","王五");
         });      
     </script>
 </head>
 <body>
 
 </body>
 </html>