本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html
前言
上篇我們介紹了 socket.io 中room的概念和使用,本篇我們繼續深入了解 socket.io 中 namespace(命名空間)的概念和使用。
對於namespace的概念只需理解3個地方:
1.在不聲明新的命名空間情況下,系統會默認使用default namespace。
2.不同命名空間下的socket是不能互相通信了,是處於隔離狀態的。
3.服務端使用 io.of(空間名稱)聲明一個命名空間。
4.客戶端使用 io.connect("http://localhost:8080/namespace");連接到一個具體的命名空間。
源碼下載地址:http://pan.baidu.com/s/1dFN6Fvj
項目文件結構
服務端
/** * Created by mike on 2017/5/15. */ var http=require("http"); var express=require("express");//引入express var socketIo=require("socket.io");//引入socket.io var app=new express(); var server=http.createServer(app); var io=new socketIo(server);//將socket.io注入express模塊 //namespace1 的訪問地址 app.get("/namespace1",function (req,res,next) { res.sendFile(__dirname+"/views/namespace1.html"); }); app.get("/namespace2",function (req,res,next) { res.sendFile(__dirname+"/views/namespace2.html"); }); server.listen(8080);//express 監聽 8080 端口,因為本機80端口已被暫用 console.log("服務已啟動"); var namespace1=io.of("/namespace1");// 使用of("命名空間") 聲明一個新的空間,不同空間下的socket是隔離的不能互相通信 var namespace2=io.of("/namespace2"); //每個客戶端socket連接時都會觸發 connection 事件 namespace1.on("connection",function (clientSocket) { // socket.io 使用 emit(eventname,data) 發送消息,使用on(eventname,callback)監聽消息 //監聽客戶端發送的 sendMsg 事件 clientSocket.on("sendMsg",function (data,fn) { // data 為客戶端發送的消息,可以是 字符串,json對象或buffer // 使用 emit 發送消息,broadcast 表示 除自己以外的所有已連接的socket客戶端。 // to(房間名)表示給除自己以外的同一房間內的socket用戶推送消息 clientSocket.broadcast.emit("receiveMsg",data); fn({"code":0,"msg":"消息發生成功","namespace":"命名空間1"}); }) }); //每個客戶端socket連接時都會觸發 connection 事件 namespace2.on("connection",function (clientSocket) { // socket.io 使用 emit(eventname,data) 發送消息,使用on(eventname,callback)監聽消息 //監聽客戶端發送的 sendMsg 事件 clientSocket.on("sendMsg",function (data,fn) { // data 為客戶端發送的消息,可以是 字符串,json對象或buffer // 使用 emit 發送消息,broadcast 表示 除自己以外的所有已連接的socket客戶端。 // to(房間名)表示給除自己以外的同一房間內的socket用戶推送消息 clientSocket.broadcast.emit("receiveMsg",data); fn({"code":0,"msg":"消息發生成功","namespace":"命名空間2"}); }) });
客戶端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>namespace1</title> </head> <body> <label>用戶:</label> <input type="text" id="uname"/><br/> <label>聊天內容:</label><br/> <textarea id="content" style="height: 200px; width:300px;"></textarea> <br/> <input id="sendMsg" type="text"/> <button id="btn_send">發送</button> <!-- 首先引入 socket.io 客戶端腳本--> <script src="/socket.io/socket.io.js"></script> <script type="text/javascript"> var socket = io.connect("http://localhost:8080/namespace1");//連接服務端,因為本機使用localhost 所以connect(url)中url可以不填或寫 http://localhost // 監聽 receiveMsg 事件,用來接收其他客戶端推送的消息 socket.on("receiveMsg",function (data) { content.value+=data.uname+":"+ data.msg+"\r\n"; }); var content=document.getElementById("content"); var sendMsg=document.getElementById("sendMsg"); var btn_send=document.getElementById("btn_send"); var uname=document.getElementById("uname"); btn_send.addEventListener("click",function () { var data={"msg":sendMsg.value ,"uname":uname.value}; //給服務端發送 sendMsg事件名的消息 socket.emit("sendMsg",data,function (data) { //打印消息發送成功后服務端返回的信息 console.log("消息發送:"+JSON.stringify(data)); }); content.value+=data.uname+":"+ data.msg+"\r\n"; sendMsg.value=""; }); </script> </body> </html>
界面及交互
socket.io romm namespace 總結
記住一點:一個socket可以有多個namespace,每個namespace可以有多個room,每個namespace和room之間是隔離的不能互相通信,room可以加入但是namespace在連接時就要指定。