本文原文地址: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在连接时就要指定。

socket.io 入门篇(三)的更多相关文章

  1. socket.io 入门篇(一)

    本文原文地址:https://www.limitcode.com/detail/591b114bb1d4fe074099d9c9.html 前言 本篇介绍使用node.js模块组件socket.io实 ...

  2. socket.io 入门篇(二)

    本文原文地址:https://www.limitcode.com/detail/5922f1ccb1d4fe074099d9cd.html 前言 上篇我们介绍了 socket.io 基本使用方法,本篇 ...

  3. socket.io入门整理教程

    socket.io入门整理  发布于 5 年前  作者 dtrex  124983 次浏览  最后一次编辑是 1 年前 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写 ...

  4. 【SSRS】入门篇(三) -- 为报表定义数据集

    原文:[SSRS]入门篇(三) -- 为报表定义数据集 通过前两篇文件 [SSRS]入门篇(一) -- 创建SSRS项目 和 [SSRS]入门篇(二) -- 建立数据源 后, 我们建立了一个SSRS项 ...

  5. Socket.io 入门 - Renyi的博客

    Socket.io Vue 中使用 NPM 安装 npm install vue-socket.io --save npm install --save socket.io-client 引用 详情 ...

  6. 转载:socket.io 入门

    原文链接:http://cnodejs.org/topic/50a1fcc7637ffa4155b5a264 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单 ...

  7. socket.io入门整理

    我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序. 最最开始 先安装socket.io: 1 npm install socket.io 利用Nod ...

  8. Node.js、Express、Socket.io 入门

    前言 周末断断续续的写了第一个socket.io Demo.初次接触socket.io是从其官网看到的,看着get started做了一遍,根据官网的Demo能提供简单的服务端和客户端通讯. 这个De ...

  9. socket.io 入门教程

    转载自:http://deadhorse.me/nodejs/2011/12/29/socket.io_induction.html socket.io socket.io是一个以实现跨浏览器.跨平台 ...

随机推荐

  1. This application failed to start because it could not find or load the Qt platform plugin "windows" 的问题原因以及解决方案

    1. 问题原因非常简单,经过各种百度,都没有找到解决方案,在此做一个记录备用. 2.原因就在于,项目目录使用了中文路径,然后出现了这个问题. 3.我是在使用 syncfusion 下的HTML 转PD ...

  2. invalid types 'int[int]' for array subscript// EOF 输入多组数据//如何键盘输入EOF

    数组维度搞错了 一次运行,要输入多组数据,直到读至输入文件末尾(EOF)为止 while(scanf("%d %d",&a, &b) != EOF) // 输入结束 ...

  3. Babylon.GUI官方文档翻译

    Babylon.GUI是一个基于Babylon.js的WebGL库,可以用来在WebGL3D场景中生成交互性UI与动态纹理.相比于html ui,Babylon.GUI的功能较为简化,但使用起来也更加 ...

  4. win10 uwp 读写XML

    UWP 对 读写 XML做了一些修改,但和之前 WPF 的方法没有大的区别. 我们先来说下什么是 XML , XML 其实是 树结构,可以表达复杂的结构,所以在定制要求高的.或其他方面如json 做不 ...

  5. 斐讯 FIR151M 频繁掉线(OpenWRT解决方案)

    0. 现象与前言 在使用斐讯 FIR151M 路由器连接网络时,传输数据时频繁掉线. 官方固件刷了两个版本,问题未解决. 建议高级用户看本教程,要做好不能使用 Web 管理界面的心理准备. 1. 准备 ...

  6. OOAD-设计模式(四)结构型模式之适配器、装饰器、代理模式

    前言 前面我们学习了创建型设计模式,其中有5中,个人感觉比较重要的是工厂方法模式.单例模式.原型模式.接下来我将分享的是结构型模式! 一.适配器模式 1.1.适配器模式概述 适配器模式(Adapter ...

  7. LeetCode 533. Lonely Pixel II (孤独的像素之二) $

    Given a picture consisting of black and white pixels, and a positive integer N, find the number of b ...

  8. R语言进行机器学习方法及实例(一)

    版权声明:本文为博主原创文章,转载请注明出处   机器学习的研究领域是发明计算机算法,把数据转变为智能行为.机器学习和数据挖掘的区别可能是机器学习侧重于执行一个已知的任务,而数据发掘是在大数据中寻找有 ...

  9. 读书笔记-你不知道的JS上-函数作用域与块作用域

    函数作用域 Javascript具有基于函数的作用域,每声明一个函数,都会产生一个对应的作用域. //全局作用域包含f1 function f1(a) { var b = 1; //f1作用域包含a, ...

  10. angular核心$watch,$digest,$apply之间的联系

    浏览器事件发生时,会在浏览器的上下文window中执行,而angular有自己的上下文angular content,angular 事件在自己的上下文angular content中执行. $wat ...