基于Node.js+socket.IO创建的Web聊天室
这段时间进了一个新的项目组，项目是用Appcan来做一个跨平台的移动运维系统，其中前台和后台之间本来是打算用WebSocket来实现的，但写好了示例后发现android不支持WebSocket，大为受挫。后在园子里看到用socket.io可以代替WebSocket，然而对于我这样JS都没学全的来说有多了一块要啃的砖头了，没奈何还是要硬着头皮上。下面是我用node.js和socket.io做的一个简易的Web聊天室，不过只支持局域网。由于也是刚学这些所以做的不好就请见谅了。
以下是服务端代码index.js代码
var module = require("./server");
var chatroom = new module.Chatroom();
chatroom.setConfig({"Port":8080, "IP":"192.168.2.105"});
chatroom.startUp();
index.js
服务端server.js代码
exports.Chatroom = function()
{
var m_config = {"Port":8080, "IP":"127.0.0.1"};
this.users = new Array();
this.setConfig = function(cfg)
{
for(var x in cfg)
{
m_config[x] = cfg[x];
}
} this.startUp = function()
{
io = require('socket.io').listen(m_config.Port, m_config.IP);
io.sockets.on('connection', function(socket){
console.log('new client connect');
socket.on('disconnection', function(data){ });
socket.on('message', function(data){
var msg = JSON.parse(data);
socket.broadcast.emit("message", data);
});
socket.on('login', function(data){
var user = JSON.parse(data);
console.log(user.UserName + " log in");
socket.broadcast.emit("message", JSON.stringify({"Type":"login", "UserName":user.UserName}));
});
socket.on('logoff', function(data){
var user = JSON.parse(data);
socket.broadcast.emit("message", JSON.stringify({"Type":"logoff", "UserName":user.UserName}));
console.log(user.UserName + " log off");
});
});
console.log('chatroom start up!');
}
}
server.js
客户端index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chatroom</title>
<link rel="stylesheet" href="style.css">
<script src="socket.io.js"></script>
<script>
var socket;
function onConnect_Click()
{
if(txtUserName.value === "")
{
alert("请输入用户名");
return;
} socket = io.connect("http://127.0.0.1:8080"); socket.on('connect', function(){
socket.emit('login', JSON.stringify({
'UserName' : txtUserName.value
}));
}); socket.on('message', function(data){
var msg = JSON.parse(data);
var display = document.getElementById("message-log"); switch(msg.Type)
{
case "login":
txtMsgLog.value += msg.UserName+"上线\r\n";
break;
case "logoff":
txtMsgLog.value += msg.UserName+"离线\r\n";
break;
case "message":
txtMsgLog.value += msg.UserName + ":" + msg.Message + "\r\n";
break;
}
});
} function onSend_Click()
{
var data = JSON.stringify({"Type":"message", "UserName":txtUserName.value, "Message":txtMsgInput.value});
socket.emit("message", data);
txtMsgLog.value += txtUserName.value + ":" + txtMsgInput.value + "\r\n";
txtMsgInput.value = "";
} function onCancel_Click()
{
txtMsgInput.value = "";
} function onDisconnect_Click()
{
socket.emit('logoff', JSON.stringify({
'UserName' : txtUserName.value
}));
}
</script>
</head>
<body>
<div id="page">
<div id="content">
<div id="message-log">
<textarea id="txtMsgLog"></textarea>
</div>
<div id="message-input">
<textarea id="txtMsgInput"></textarea>
<div id="message-buttons">
<label for="txtUserName">用户姓名</label>
<input type="text" id="txtUserName" size="20">
<button id="btnConnect" onClick="onConnect_Click()">连接</button>
<button id="btnDisconnect" onClick="onDisconnect_Click()">断开</button>
<button id="btnSend" onClick="onSend_Click()">发送</button>
<button id="btnCancel" onClick="onCancel_Click()">取消</button>
</div>
</div>
</div>
</div>
</body>
</html>
index.html
客户端样式文件style.css
html, body, div
{
margin:;
padding:;
} #page
{
width:600px;
height:600px;
margin-left:auto;
margin-right:auto;
border:1px solid green;
} #content
{
width:100%;
height:100%;
} #message-log
{
width:580px;
height:400px;
margin:10px;
text-align:center;
border:1px solid green;
} #txtMsgLog
{
width:570px;
height:390px;
text-align:left;
} #message-input
{
width:580px;
height:160px;
margin:10px;
border:1px solid green;
text-align:center;
} #txtMsgInput
{
width:570px;
margin:;
height:100px;
text-align:left;
} #message-buttons
{
width:580px;
margin:10px;
}
#right-content
{
width:200px;
height:600px;
float:right;
border:1px solid green;
} #msg-user
{
color:red;
} #msg-content
{
color:green;
}
style.css
基于Node.js+socket.IO创建的Web聊天室的更多相关文章
- 基于node.js+socket.io+html5实现的斗地主游戏（1）概述
一.游戏描述 说是斗地主游戏,其实是寝室自创的"捉双A",跟很多地方的捉红10.打红A差不多,大概规则是: 1.基础牌型和斗地主一样,但没有大小王,共52张牌,每人13张,这也是为 ...
- 使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...
- （转）使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...
- 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】
原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...
- 转载：node.js socket.io
本文转自:http://www.xiaocai.name/post/cf1f9_7b6507 学习node.js socket.io 使用 用node.js(socket.io)实现数据实时推送 在 ...
- 利用socket.io+nodejs打造简单聊天室
代码地址如下:http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...
- node.js + socket.io实现聊天室一
前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
- node.js+socket.io配置详解
由于我是在win7的环境下,在这里就以win7系统为例进行讲解了. 首先需要在nodejs官网下载最新版的node.js,下载完毕直接安装即可,安装成功后在cmd命令行中执行node指令,如下结果就说 ...
随机推荐
- Goldengate 12.2新特性-自描述的队列文件
OGG12.2中最大的变化之一就是队列文件是自描述的,意思是不再担心以前版本中,表结构异构的情况,也不再需要defgen生成定义文件,以及不再使用assumeTargetDefs或SourceDefs ...
- warning C4305: “=”: 从“int”到“unsigned char”截断解决方法[zz]
在控制台程序中定义: float x; x=22.333; 编译会出现 warning C4305: “初始化”: 从“double”到“float”截断 系统默认此浮点数是22.333是double ...
- docker 源码分析 二（基于1.8.2版本），docker client与daemon交互
(2) 那我们通过docker客户端发送一个命令,docker是怎样接收到并处理的呢,我们就举个例子来看一下,比如docker pull 命令: 我们回到 docker/docker.go 中,在上一 ...
- Glossary
Glossary term terminology Certificate authority A norganization that authorizes a certificate. Certi ...
- Zookeeper源码编译为Eclipse工程(转)
原文地址:http://blog.csdn.net/jiyiqinlovexx/article/details/41179293 为了深入学习ZooKeeper源码,首先就想到将其导入到Eclispe ...
- 移动互联网实战--Web Restful API设计和基础架构
前言: 在移动互联网的大潮中, Web Restful API逐渐成为Web Server重要的一个分支. 移动端和服务端的交互, 主流的方式还是通过Http协议的形式来进行. 请求以Get/Post ...
- TP代码
<?php// 本类由系统自动生成,仅供测试用途class IndexAction extends Action { public function index(){ $th ...
- mysql保存数据提示1366 Incorrect string value: ‘\xF0\x9F\x98\x8A\xF0\x9F…’ 解决
在保存数据时我们如果页面编辑与数据库字段编码不一样或字符集超出你了mysql数据库中的字符类型就有可能出一\\xF0\\x9F\\x98\\x8A\\xF0\\x9F提示了,下面我来简单的解决方法. ...
- 自定义webkit搜索框样式
好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...
- Python学习笔记——文件操作
python中,一切皆对象. 一.文件操作流程 (1)打开文件,得到一个文件句柄(对象),赋给一个对象: (2)通过文件句柄对文件进行操作: (3)关闭文件. 文件对象f通过open()函数来创建 ...