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 ...
随机推荐
- 使用OLAMISDK实现一个语音输入数字进行24点计算的iOS程序
前言 在目前的软件应用中,输入方式还是以文字输入方式为主,但是语音输入的方式目前应用的越来越广泛.这是一个利用 Olami SDK 编写的一个24点iOS程序,是通过语音进行输入. Olami SDK ...
- php的序列化和反序列化有什么好处？
序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更具维护性. PHP 中的序列化和反序列 ...
- MAVEN 打包WAR
<build> <finalName>edu-web-boss</finalName> <resources> <resource> < ...
- Windows下使用nginx搭建反向代理服务器
反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时 ...
- JAVA基础知识总结：一
一.软件开发的常识 1.什么是软件? 一系列按照特定顺序组织起来的计算机数据或者指令 常见的软件: 系统软件:Windows\Mac OS \Linux 应用软件:QQ,一系列的播放器(爱奇艺,乐视, ...
- 数据库.MongoDB.安装MongoDB数据库
树莓派安装方法 版本: mongodb 2.4.10 sudo apt-get install mongodb -y 安装完成后,检查命令 mongo 看到下图的内容,表示已安装并启动成功 ===== ...
- LeetCode 674. Longest Continuous Increasing Subsequence （最长连续递增序列）
Given an unsorted array of integers, find the length of longest continuous increasing subsequence. E ...
- [译]ASP.NET Core 2.0 路由引擎之网址生成
问题 如何在ASP.NET Core 2.0中由路由引擎来生成网址? 答案 新建一个空项目,修改Startup.cs文件,添加MVC服务和中间件: public void ConfigureServi ...
- 走进 Visual Studio Mobile Center for Xamarin.Forms
前几篇分别介绍了 Xamarin.Forms 的 MVVM 的 Prism,UITest,Nuint Test,那这样算下来,代码部分基本结构都有了(逻辑就先忽略吧) 那接下来就应该是自动 Build ...
- linux学习（五）系统目录结构，ls命令，文件类型，alias
一.系统目录结构 在我们的根目录下,有这样一些文件夹 /bin /sbin /usr/bin /usr/sbin /sbin一般都是root用户用的 /boot 系统启动相关的,grup就放在这里,这 ...