本文原文地址：https://www.limitcode.com/detail/5922f1ccb1d4fe074099d9cd.html

前言

上篇我们介绍了 socket.io 基本使用方法，本篇我们继续深入了解 socket.io 中 room（房间）的概念和使用。

对于 room 的概念，你只需理解3个地方就可以：

1. 在不加入或指定room的情况下，socket.io 会默认分配一个default room

2. 同一room下的socket可以广播消息

3. join(房间名) 加入一个房间；leave(房间名) 离开一个房间；broadcast.to(房间名).emit() 给同一个房间的其他socket广播消息

源码下载地址：http://pan.baidu.com/s/1eSaf1Pg

项目文件结构

服务端

/**

 * 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模块

//客户端 1 的访问地址

app.get("/client1",function (req,res,next) {

    res.sendFile(__dirname+"/views/client1.html");

});

app.get("/client2",function (req,res,next) {

    res.sendFile(__dirname+"/views/client2.html");

});

server.listen(8080);//express 监听 8080 端口，因为本机80端口已被暂用

console.log("服务已启动");

//每个客户端socket连接时都会触发 connection 事件

io.on("connection",function (clientSocket) {

    // socket.io 使用 emit(eventname,data) 发送消息，使用on(eventname,callback)监听消息

    //加入房间

    clientSocket.on("joinRoom",function (data,fn) {

        clientSocket.join(data.roomName); // join(房间名)加入房间

        fn({"code":0,"msg":"加入房间成功","roomName":data.roomName});

    });

    //退出 离开房间

    clientSocket.on("leaveRoom",function (data,fn) {

        clientSocket.leave(data.roomName);//leave(房间名) 离开房间

        fn({"code":0,"msg":"已退出房间","roomName":data.roomName});

    });

    //监听客户端发送的 sendMsg 事件

    clientSocket.on("sendMsg",function (data,fn) {

        // data 为客户端发送的消息，可以是 字符串，json对象或buffer

        // 使用 emit 发送消息，broadcast 表示 除自己以外的所有已连接的socket客户端。

        // to(房间名)表示给除自己以外的同一房间内的socket用户推送消息

        clientSocket.broadcast.to(data.roomName).emit("receiveMsg",data);

        fn({"code":0,"msg":"消息发生成功"});

    })

});

客户端（2个客户端页面内容一样）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>客户端1</title>

</head>

<body>

<label>房间名:</label>

<input type="text" id="txtRoom"/>

<button type="button" id="btn-joinRoom">加入房间</button>

<button type="button" id="btn-leaveRoom">离开房间</button>

<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();//连接服务端，因为本机使用localhost 所以connect(url)中url可以不填或写 http://localhost

    // 监听 receiveMsg 事件，用来接收其他客户端推送的消息

 socket.on("receiveMsg",function (data) {

        content.value+=data.client+":"+data.msg+"\r\n";

 });

 var content=document.getElementById("content");

 var sendMsg=document.getElementById("sendMsg");

 var btn_send=document.getElementById("btn_send");

 var btn_joinRoom=document.getElementById("btn-joinRoom");

 var btn_leaveRoom=document.getElementById("btn-leaveRoom");

 var txtRoom=document.getElementById("txtRoom");

 btn_leaveRoom.addEventListener("click",function () {

        socket.emit("leaveRoom",{"roomName":txtRoom.value},function (data) {

            //打印离开房间后服务端返回的信息

 console.log("离开房间："+ JSON.stringify(data) )

        });

 txtRoom.value="";

 })

    btn_joinRoom.addEventListener("click",function () {

        var roomName=txtRoom.value;

 socket.emit("joinRoom",{"roomName":roomName},function (data) {

            //打印加入房间成功后返回的信息

 console.log("加入房间："+JSON.stringify(data));

 })

    });

 btn_send.addEventListener("click",function () {

        if(!sendMsg.value){

            alert("请输入房间号");return;

 }

        var data={"msg":sendMsg.value,"roomName":txtRoom.value,"client":"客户端1"};

 //给服务端发送 sendMsg事件名的消息

 socket.emit("sendMsg",data,function (data) {

            //打印消息发送成功后服务端返回的信息

 console.log("消息发送："+JSON.stringify(data));

 });

 content.value+=data.client+":"+data.msg+"\r\n";

 sendMsg.value="";

 });

</script>

</body>

</html>

界面效果如下：

socket.io 入门篇（二）的更多相关文章

  1. socket.io 入门篇（一）

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

  2. socket.io 入门篇（三）

    本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html 前言 上篇我们介绍了 socket.io 中room的概念和 ...

  3. 【SSRS】入门篇(二) -- 建立数据源

    原文:[SSRS]入门篇(二) -- 建立数据源 通过 [SSRS]入门篇(一) -- 创建SSRS项目 这篇,我们建立了一个SSRS项目: 接下来,我们以 AdventureWorks2012 示例 ...

  4. socket.io入门整理教程

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

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

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

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

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

  7. socket.io 入门教程

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

  8. 转载：socket.io 入门

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

  9. socket.io入门整理

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

随机推荐

  1. Emgu.CV(一)

    由于这块的知识不少,会分好几期写完 什么是OpenCV? OpenCV是一个基于(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows和Mac OS操作系统上.它轻量级而且高效--由一 ...

  2. vue-cli + sass 的正确打开方式

    关于在vue-cli搭建的项目中怎么配置sass,网上搜到的基本是这种答案: 但是我认为,直接将样式写在每个单文件的<style>里,是十分不明智的做法.且不说node-sass安装过程的 ...

  3. LINUX 软件管理

    dpkg 安装 dpkg -i package.deb 卸载 dpkg -r packagename 彻底卸载 dpkg -P packagename apt-get 搜查包 apt-cache se ...

  4. EJBCA安装教程+postgresql+wildfly10

    1. 安装环境说明 笔者在本机的虚拟机下进行的安装,数据库已经装好了的. ubuntu16.04 x64 postgresql:9 wildfly10 2. 安装前准备 下载必要软件包(直接到官网下载 ...

  5. [Scikit-learn] 4.4 Dimensionality reduction - PCA

    2.5. Decomposing signals in components (matrix factorization problems) 2.5.1. Principal component an ...

  6. Ionic3 创建应用（Android）

    打开CMD 通过命令行进入项目目录 创建一个App项目 ionic start myApp blank 空白App ionic start myApp tabs 导航条 ionic start myA ...

  7. 利用Tkinter和matplotlib两种方式画饼状图

    当我们学习python的时候,总会用到一些常用的模块,接下来我就详细讲解下利用两种不同的方式画饼状图.首先利用[Tkinter]中的canvas画布来画饼状图: from tkinter import ...

  8. 远程连接SQL Server 2014遇到的问题和解决

    在本机可以通过IP地址的数据库引擎登录数据库,可用同网段的其它电脑远程登录一直不成功.查看网上资料,认为是主机防火墙的问题. 在微软网站上查找相关的文档找到了答案.http://msdn.micros ...

  9. C# Post和Get请求

    Get请求: /// <summary> /// 调用ToxyzAPI /// </summary> /// <param name="requetid&quo ...

  10. .NET MVC 二级域名路由的实现

    .NET MVC 5以下版本: http://www.cnblogs.com/luanwey/archive/2009/08/12/1544444.html http://blog.maartenba ...