socket.io 入门篇

Posted 2020-10-15 暗夜余晖

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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在连接时就要指定。

以上是关于socket.io 入门篇的主要内容，如果未能解决你的问题，请参考以下文章