正文

socket.io入门篇

暗夜余晖  暗夜余晖  2022-10-02  663

关键词：

本文原文地址：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+"
";
 });
 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+"
";
 sendMsg.value="";
 });

    

</script>

</body>
</html>

界面及交互

技术分享图片

socket.io romm namespace 总结

记住一点：一个socket可以有多个namespace，每个namespace可以有多个room，每个namespace和room之间是隔离的不能互相通信，room可以加入但是namespace在连接时就要指定。

socket.io入门篇

...mitcode.com/detail/5926e3a056fba70278bf2044.html前言上篇我们介绍了socket.io中room的概念和使用，本篇我们继续深入了解socket.io中namespace（命名空间）的概念和使用。对于namespace的概念只需理解3个地方：1.在不声明新的命名空间情况下，系... 查看详情

socket.io入门原理

1.Socket.IO原理node.js提供了高效的服务端运行环境，但是由于浏览器端对HTML5的支持不一，为了兼容所有浏览器，提供卓越的实时的用户体验，并且为程序员提供客户端与服务端一致的编程体验，于是socket.io诞生。Socket.io将Websocket... 查看详情

socket.io入门

...建一个chat-example文件夹，并建立一个package.json文件{"name":"socket-chat-example","version":"0.0.1","description":"myfirstsocket.ioapp","dependencies":{}}2 查看详情

socket.io入门原理

socket.io入门，简易聊天室(代码片段)

...。所以我们需要一个可以由服务端主动发出的协议，即WebSocket。WebSocket是HTML5新增的一种通信协议，其特点是服务端可以主动向客户端推送信息，客户端也可以主动向服务端发送信息，是真正的双向平等对话，属于服务器推送技... 查看详情

socket.io快入入门案例

socket.io基本介绍创建一个nodejs项目步骤1：创建项目目录步骤2：初始化nodejs项目目录结构命令：npminit-f结果如下：在nodejs项目安装socket.io模块命令：npminstallsokcet.iosocket.io网站：https://socket.io/socket.io快速入门案例客户端：index.html&l... 查看详情

Socket.io 私信通知

】Socket.io私信通知【英文标题】：Socket.ioprivatemessagenotification【发布时间】：2013-01-1004:29:39【问题描述】：嘿，***！我正在使用Laravel3开发一个社区，我正在尝试实现一些Facebook风格的私人消息传递。我完成了编码部分，但我和我... 查看详情

Socket IO 将 TCP 套接字消息输出到网页

】SocketIO将TCP套接字消息输出到网页【英文标题】：SocketIOtooutputaTCPsocketmessagetoawebpage【发布时间】：2018-05-1415:53:02【问题描述】：我正在试验NodeJS和SocketIO。我在这里查看了Socket.IO入门指南：https://socket.io/get-started/chat/。代码如... 查看详情

/socket.io/socket.io.js 中不提供 Socket.io

】/socket.io/socket.io.js中不提供Socket.io【英文标题】：Socket.ioisnotservedin/socket.io/socket.io.js【发布时间】：2012-12-2420:46:28【问题描述】：我已在此处阅读有关我在node.js中的问题的答案，但我的问题仍然存在。在服务器中使用socket.io，... 查看详情

Express.js 'socket.io/socket.io.js 404'

】Express.js\\\'socket.io/socket.io.js404\\\'【英文标题】：Express.js\'socket.io/socket.io.js404\'Express.js\'socket.io/socket.io.js404\'【发布时间】：2017-02-0207:36:19【问题描述】：我正在尝试在使用ExpressJS的网站http://clickthebutton.herokuapp.com上合并实查看详情

socket.io中文手册socket.io中文文档

socket.io中文手册，socket.io中文文档转载于：http://www.cnblogs.com/xiezhengcai/p/3956401.html服务端io.on(‘connection’,function(socket));//监听客户端连接,回调函数会传递本次连接的socketio.sockets.emit(‘String’,data);//给所有客户端广播消息io.socket 查看详情

socket.io中文手册socket.io中文文档

未找到 Socket.io.js（node.js + express + socket.io）

】未找到Socket.io.js（node.js+express+socket.io）【英文标题】：Socket.io.jsnotfound(node.js+express+socket.io)【发布时间】：2014-10-2022:06:51【问题描述】：我一直在检查其他相关答案，例如：node.js/socket.io/socket.io.jsnotfoundSocket.ionotbeingservedbyNode.j... 查看详情

使用androidnodejs和socket.io创建一个实时聊天应用程序(代码片段)

介绍WebSockets是非常漂亮的工具，它允许我们在现代Web应用程序中建立实时通信。事实上，这个机制非常强大，它被用来构建不同类型的应用程序，如实时聊天或通知系统等。在本文中，我们将向您展示如何使... 查看详情

socket.io，io 未定义（JS 错误）

】socket.io，io未定义（JS错误）【英文标题】：socket.io,ioisnotdefined(JSError)【发布时间】：2011-08-0322:25:59【问题描述】：我刚开始使用socket.io，它在客户端页面上给出JS错误io未定义如何解决这个问题？【问题讨论】：【参考方案1】... 查看详情

socket.io 中 io.on 和 socket.on 的区别

】socket.io中io.on和socket.on的区别【英文标题】：Differenceinio.onandsocket.oninsocket.io【发布时间】：2021-09-2612:55:06【问题描述】：此图是否正确表示节点js服务器中的io和套接字？我想说的是......首先我们写-constio=require("socket.io")(8080);... 查看详情

在 socket.io 的情况下出现错误“XMLHttpRequest 无法加载 /socket.io”

】在socket.io的情况下出现错误“XMLHttpRequest无法加载/socket.io”【英文标题】：Gettingerror\'XMLHttpRequestcannotload/socket.io\'incaseofsocket.io【发布时间】：2015-05-0506:25:14【问题描述】：我收到错误消息：“XMLHttpRequestcannotload/socket.io”forsock... 查看详情