socket.io 入门篇（三）
本文原文地址：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在连接时就要指定。
优质内容筛选与推荐>>1、【前端】【vue 3-7】vue中的条件渲染
2、怎么配置 Oracle 侦听器来使用SQL操作ST_Geometry [转]
3、STM32唯一的ID
4、LMS算法实现matlab
5、蓝点通用管理系统图文介绍