首页 技术 正文
技术 2022年11月8日
0 收藏 518 点赞 2,075 浏览 3395 个字

本文原文地址: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

项目文件结构

socket.io 入门篇(二)

服务端

/**
* Created by mike on 2017/5/15.
*/var http=require("http");
var express=require("express");//引入express
var socketIo=require("socket.io");//引入socket.iovar 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 入门篇(二)

上一篇: Python之print字典
下一篇: C#图片压缩上传
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,910
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,435
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,250
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,061
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,693
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,731