web前端|js教程
socket.io,express,多房间聊天
web前端-js教程
socket.io简介
114 导航源码,vscode 实时注释,ubuntu vcmi,tomcat堆栈分配,sqlite3 生成lib,wordpress 插件复制,知乎用的什么前端框架,梦见自己在家里爬虫子,php 简写,陈隆华seo,discuz删除频道栏目网站不显示了,网页版注册登录和留言源码,小米的微商城模板lzw
Socket.IO是一个开源的WebSocket库，它通过Node.js实现WebSocket服务端，同时也提供客户端JS库。Socket.IO支持以事件为基础的实时双向通讯，它可以工作在任何平台、浏览器或移动设备。
在线访谈系统源码,ubuntu老版本源,tomcat9 下载哪个,直播间 爬虫,php 面试sql 优化,seo教程入门seo顾问lzw
Socket.IO支持4种协议：WebSocket、htmlfile、xhr-polling、jsonp-polling，它会自动根据浏览器选择适合的通讯方式，从而让开发者可以聚焦到功能的实现而不是平台的兼容性，同时Socket.IO具有不错的稳定性和性能。
ramspeed 源码,vscode绿色,ubuntu修改ip,tomcat管理页面,sqlite插件,简单大气网页设计,数据库服务器和网页服务器分开不在一个机房,美国服务器租用价格,dz3.2手机版seo插件,前端 ui 框架,开源的爬虫,php 赋值,网站设计seo,注释springboot 意义,css描述标签,phpcms企业网站源码,网页游戏免费源码下载,文档说明模板,织梦cms后台界面修改,js实现scroll回到页面顶端,简单的宿舍管理系统,手机淘宝客程序lzw
多房间聊天
socket.io提供rooms和namespace的API
用rooms的API就可以实现多房间聊天了，总结出来无外乎就是：join/leave room 和 say to room
// join和leaveio.on(connection, function(socket){ socket.join(some room); // socket.leave(some room);});// say to roomio.to(some room).emit(some event):io.in(some room).emit(some event):
代码 github
新建文件夹chatapp-demo
chatapp-demo/package.json
{ "name": "chatapp-demo", "version": "1.0.0", "description": "multi room chat app demo, powered by socket.io", "main": "app.js", "dependencies": { "express": "^4.13.3", "hbs": "^3.1.0", "path": "^0.11.14", "socket.io": "^1.3.6" }, "devDependencies": {}, "author": "wuyanxin", "license": "ISC"}
执行 npm install
服务端代码
增加文件 chatapp-demo/app.js
var express = require(express);var path = require(path);var IO = require(socket.io);var router = express.Router();var app = express();var server = require(http).Server(app);app.use(express.static(path.join(__dirname, public)));app.set(views, path.join(__dirname, views));app.set(view engine, hbs);// 创建socket服务var socketIO = IO(server);// 房间用户名单var roomInfo = {};socketIO.on(connection, function (socket) { // 获取请求建立socket连接的url // 如: http://localhost:3000/room/room_1, roomID为room_1 var url = socket.request.headers.referer; var splited = url.split(/); var roomID = splited[splited.length - 1]; // 获取房间ID var user = \; socket.on(join, function (userName) { user = userName; // 将用户昵称加入房间名单中 if (!roomInfo[roomID]) { roomInfo[roomID] = []; } roomInfo[roomID].push(user); socket.join(roomID); // 加入房间 // 通知房间内人员 socketIO.to(roomID).emit(sys, user + 加入了房间, roomInfo[roomID]); console.log(user + 加入了 + roomID); }); socket.on(leave, function () { socket.emit(disconnect); }); socket.on(disconnect, function () { // 从房间名单中移除 var index = roomInfo[roomID].indexOf(user); if (index !== -1) { roomInfo[roomID].splice(index, 1); } socket.leave(roomID); // 退出房间 socketIO.to(roomID).emit(sys, user + 退出了房间, roomInfo[roomID]); console.log(user + 退出了 + roomID); }); // 接收用户消息,发送相应的房间 socket.on(message, function (msg) { // 验证如果用户不在房间内则不给发送 if (roomInfo[roomID].indexOf(user) === -1) { return false; } socketIO.to(roomID).emit(msg, user, msg); });});// room pagerouter.get(/room/:roomID, function (req, res) { var roomID = req.params.roomID; // 渲染页面数据(见views/room.hbs) res.render( oom, { roomID: roomID, users: roomInfo[roomID] });});app.use(/, router);server.listen(3000, function () { console.log(server listening on port 3000);});
客户端代码
新增chatapp/views/room.hbs
房间: {{roomID}}
当前在线人数: {{users.length}}
在线用户:
{{users}}
按Enter键发送$(function () { // ----------设置昵称------------- var userName = \; while ($(#userName).text().trim() === \) { userName = prompt("请设置你的昵称",""); $(#userName).text(userName); } // ---------创建连接----------- var socket = io(); // 加入房间 socket.on(connect, function () { socket.emit(join, userName); }); // 监听消息 socket.on(msg, function (userName, msg) { var message = \ +
+ + userName + : + + msg + \ +
; $(#msglog).append(message); // 滚动条保持最下方 $(#msglog).scrollTop($(#msglog)[0].scrollHeight); }); // 监听系统消息 socket.on(sys, function (sysMsg, users) { var message =
+ sysMsg +
; $(#msglog).append(message); $(#count).text(users.length); $(#users).text(users); }); // 发送消息 $(#messageInput).keydown(function (e) { if (e.which === 13) {e.preventDefault();var msg = $(this).val();$(this).val(\);socket.send(msg); } }); // 退出房间 $(#joinOrLeave).click(function () { if ($(this).text() === 退出房间) {$(this).text(进入房间);socket.emit(leave);var msg = 你已经退出了房间,重新发言请点击"进入房间";$(#msglog).append(
+msg+
); } else {$(this).text(退出房间);socket.emit(join, userName); } }); });
新增 chatapp/public/index.html
房间列表
1号房间 2号房间 3号房间 4号房间 5号房间 6号房间 7号房间 8号房间 9号房间 10号房间
运行效果
代码已放在github /wuyanxin/chatapp-demo.git
