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>
執行結果:
回調函數實在觸發端執行的.
