socket.io 入门篇（二）

本文原文地址：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 入门篇（二）的更多相关文章

socket.io 入门篇（一）
本文原文地址:https://www.limitcode.com/detail/591b114bb1d4fe074099d9c9.html 前言本篇介绍使用node.js模块组件socket.io实 ...
socket.io 入门篇（三）
本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html 前言上篇我们介绍了 socket.io 中room的概念和 ...
【SSRS】入门篇(二) -- 建立数据源
原文:[SSRS]入门篇(二) -- 建立数据源通过 [SSRS]入门篇(一) -- 创建SSRS项目这篇,我们建立了一个SSRS项目: 接下来,我们以 AdventureWorks2012 示例 ...
socket.io入门整理教程
socket.io入门整理发布于 5 年前作者 dtrex 124983 次浏览最后一次编辑是 1 年前我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写 ...
Socket.io 入门 - Renyi的博客
Socket.io Vue 中使用 NPM 安装 npm install vue-socket.io --save npm install --save socket.io-client 引用详情 ...
Node.js、Express、Socket.io 入门
前言周末断断续续的写了第一个socket.io Demo.初次接触socket.io是从其官网看到的,看着get started做了一遍,根据官网的Demo能提供简单的服务端和客户端通讯. 这个De ...
socket.io 入门教程
转载自:http://deadhorse.me/nodejs/2011/12/29/socket.io_induction.html socket.io socket.io是一个以实现跨浏览器.跨平台 ...
转载：socket.io 入门
原文链接:http://cnodejs.org/topic/50a1fcc7637ffa4155b5a264 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单 ...
socket.io入门整理
我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序. 最最开始先安装socket.io: 1 npm install socket.io 利用Nod ...

随机推荐

Java 多态、内部类、异常、包
一.多态 1. 概述理解:多态可以理解为事物存在的多种体(表)现形态. 例如: 动物中的猫和狗. 猫这个对象对应的是猫类型,例如:猫 x = new 猫(); 同时猫也是动物中的一种,也可以把猫称为 ...
移动端效果之IndexList
写在前面接着前面的移动端效果讲,这次讲解的的是IndexList的实现原理.效果如下: 代码请看这里:github 移动端效果之swiper 移动端效果之picker 移动端效果之cellSwipe ...
[bzoj2131]免费的馅饼树状数组优化dp
2131: 免费的馅饼 Time Limit: 10 Sec Memory Limit: 259 MB[Submit][Status][Discuss] Description Input 第一行是 ...
阿里官方Java代码规范标准《阿里巴巴Java开发手册终极版 v1.3.0》
终极版 v1.3.0 2017年开春之际,阿里诚意献上重磅大礼:<阿里巴巴Java开发手册>,首次公开阿里官方Java代码规范标准.这套Java统一规范标准将有助于提高行业编码规范化水平, ...
Spring bean 生命周期验证
一.从源码注释看bean生命周期从JDK源码上看,BeanFactory实现类需要支持Bean的完整生命周期,完整的初始化方法及其标准顺序(格式:接口方法)为: 1.BeanNameAware s ...
Yii2之ListView小部件
ListView是yii框架中类似GridView,也是用于展示多条数据的小部件,相比GridView,ListView可以更加灵活地设置数据展示的格式. 下面以我自己做的一个使用ListView来展 ...
使用python实现计算器功能
学习python过程中的作业.实现了+.-.×./.及幂运算,支持括号优先级. 代码为python3.5 import re def formatEquation(string): string = ...
OpenCV4Android背景建模（MOG、MOG2）
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃很久以前的笔记了,分享给大家吧...OpenCV4Android中用于背景建模的类主要 ...
TiDB 作为 MySQL Slave 实现实时数据同步
由于 TiDB 本身兼容绝大多数的 MySQL 语法,所以对于绝大多数业务来说,最安全的切换数据库方式就是将 TiDB 作为现有数据库的从库接在主 MySQL 库的后方,这样对业务方实现完全没有侵入性 ...
HDU 6140 Hybrid Crystals
Hybrid Crystals Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...