zoukankan      html  css  js  c++  java
  • 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; 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在连接时就要指定。

  • 相关阅读:
    201-STM32+Air724UG基本控制篇(阿里云物联网平台)-设备使用物模型Topic上报温湿度数据
    Sentinel Go 核心统计结构滑动窗口的深度解析
    golang sync.Mutex互斥锁的实现原理
    Golang-Scheduler原理解析
    Golang-Channel原理解析
    golang里channel的实现原理
    最长回文子序列
    GO语言的goroutine并发原理和调度机制
    golang 常见问题
    通过js给网页加上水印背景
  • 原文地址:https://www.cnblogs.com/limitcode/p/7900832.html
Copyright © 2011-2022 走看看