node+express+socket.io制作一个聊天室功能
首先是下载包:
npm install express
npm install socket.io
建立文件:
服务器端代码:server.js
var http=require("http");
var express=require("express");
var sio=require("socket.io");
var app=express();
app.use(express.static(__dirname+"/"));
var server=http.createServer(app);
app.get("/", function (req, res) {
res.sendFile(__dirname+"/chart.html");
});
server.listen(1337,"127.0.0.1", function () {
console.log("开始监听");
});
var io=sio.listen(server);
var names=[];
io.sockets.on("connection", function (socket) {
socket.on("login", function (name) {
for(var i=0;i<names.length;i++){
if(names[i]==name){
socket.emit("duplicate");
return;
}
}
names.push(name);
io.sockets.emit("login",name);
io.sockets.emit("sendClients",names);
});
socket.on("chat", function (data) {
io.sockets.emit("chat",data);
});
socket.on("logout", function (name) {
for(var i=0;i<names.length;i++){
if(names[i]==name){
names.splice(i,1);
break;
}
}
socket.broadcast.emit("logout",name);
io.sockets.emit("sendClients",names);
});
});
静态页面 chart.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Socket.IO聊天室</title>
<link rel="stylesheet" href="chart.css" />
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="chart.js"></script>
</head>
<body onload="window_onload()">
<h1>Socket.IO聊天室</h1>
<div id="divContainer1">
<table class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
<tr class="trDlg">
<td class="tdDlg" width="5">
用户名:
<input id="tbxUsername" type="text" value="游客" size="20" />
<input id="btnLogin" type="button" value="登录" onclick="btnLogin_onclick();" />
<input id="btnLogout" type="button" value="退出" disabled onclick="btnLogout_onclick();" />
</td>
</tr>
</table>
</div>
<div id="divLeft">
<div id="divchat"></div>
<div id="divContainer3">
<table class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
<tr class="trDlg">
<td valign="top" class="tdDlg" nowrap>对话</td>
<td valign="top" class="tdDlg">
<textarea id="tbxMsg" cols="255" rows="5" style="width: 100%"></textarea>
</td>
<td valign="top" class="tdDlg">
<input id="btnSend" type="button" value="发送" disabled onclick="btnSend_onclick();" />
</td>
</tr>
</table>
</div>
</div>
<div id="divRight">用户列表:</div>
</body>
</html>
静态css文件:
h1{
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 14pt;
color: #006bb5;
background-color: #f0f0f0;
border-radius: 5px;
border: 1px solid #f0f0f0;
padding: 5px;
margin: 0 0 18px 0;
}
div[id^=divContainer]{
border:;
margin: 10px 0;
padding: 3px;
background-color:#f0f0f0;
border-radius: 5px;
}
div#divLeft{
width: 85%;
background-color:#f0f0f0;
float: left;
}
div#divRight{
width: 15%;
background-color:white;
float: right;
font-weight: bold;
font-size: 12px;
}
div#divchat{
border:;
margin: 10px 0;
padding: 3px;
background-color:#f0f0f0;
border-radius: 5px;
position: relative;
height: 300px;
overflow: auto;
font-size: 12px;
}
table.tbDlg{
font-family:Verdana,Helvetica,sans-serif;
font-weight: normal;
font-size: 12px;
background-color: #f0f0f0;
}
tr.trDlg,td.tdDlg {
background-color: #f0f0f0;
font-size: 10px;
}
textarea{
font-family: inherit;
font-size: 10pt;
border:1px solid #444;
background-color:white;
width: 100%;
}
input[type="button"]{
font-family: inherit;
border: 1px solid #808080;
border-radius: 10px;
margin: 1px;
color: white;
background-color:#81a0b5;
width: 100px;
}
input[type="button"]:hover{
margin: 1px;
background-color: #006bb5;
}
input[type="button"]:active{
margin: 1px;
font-weight: bold;
background-color:#006bb5;
}
input[type="button"]:focus{
margin:;
font-weight: bold;
background-color:#006bb5;
}
静态js文件
var userName,//用户登录到socket.io聊天室中时所使用的用户名
socket,//与聊天服务器连接的socket端口对象
tbxUsername,//用户名文本框
tbxMsg,//对话文本框
divChat;//页面中显示消息区域
function window_onload(){
divChat=document.getElementById("divchat");
tbxUsername=document.getElementById("tbxUsername");
tbxMsg=document.getElementById("tbxMsg");
tbxUsername.focus();
tbxUsername.select();
} function AddMsg(msg){
divChat.innerHTML+=msg+"<br>";
if(divChat.scrollHeight>divChat.clientHeight)
divChat.scrollTop=divChat.scrollHeight-divChat.clientHeight;
}
function btnLogin_onclick(){
if(tbxUsername.value.trim()==""){
alert("请输入用户名");
return;
}
userName=tbxUsername.value.trim();
socket=io.connect();
socket.on("connect",function(){
AddMsg("与聊天服务器的连接已建立.");
socket.on("login", function (name) {
AddMsg("欢迎用户"+name+"进入聊天室.");
});
socket.on("sendClients", function (names) {
var divRight=document.getElementById("divRight");
var str="";
names.forEach(function (name) {
str+=name+"<br />";
});
divRight.innerHTML="用户列表<br />";
divRight.innerHTML+=str;
});
socket.on("chat", function (data) {
AddMsg(data.user+"说:"+data.msg);
});
socket.on("disconnect", function () {
AddMsg("与聊天服务器的连接已断开.");
document.getElementById("btnSend").diabled=true;
document.getElementById("btnLogout").disabled=true;
document.getElementById("btnLogin").disabled="";
var divRight=document.getElementById("divRight");
divRight.innerHTML="用户列表";
});
socket.on("logout", function (name) {
AddMsg("用户"+name+"已退出聊天室.")
});
socket.on("duplicate", function () {
alert("该用户名已被使用.");
document.getElementById("btnSend").disabled=true;
document.getElementById("btnLogout").disabled=true;
document.getElementById("btnLogin").disabled="";
});
}); socket.on("error", function (err) {
AddMsg("与聊天服务器之间的链接发生错误.");
socket.disconnect();
socket.removeAllListeners("connect");
io.sockets={};
});
socket.emit("login",userName);
document.getElementById("btnSend").disabled="";
document.getElementById("btnLogout").disabled="";
document.getElementById("btnLogin").disabled=true;
} function btnSend_onclick(){
var msg=tbxMsg.value;
if(msg.length>0){
socket.emit("chat",{user:userName,msg:msg});
tbxMsg.value="";
}
}
function btnLogout_onclick(){
socket.emit("logout",userName);
socket.disconnect();
socket.removeAllListeners("connect");
io.sockets={};
AddMsg("用户"+userName+"退出聊天室:");
var divRight=document.getElementById("divRight");
divRight.innerHTML="用户列表";
document.getElementById("btnSend").disabled="disabled";
document.getElementById("btnLogout").disabled="disabled";
document.getElementById("btnLogin").disabled="";
}
最终界面
可以多开几个浏览器进行测试.这样效果更佳.
node+express+socket.io制作一个聊天室功能的更多相关文章
- Express+Socket.IO 实现简易聊天室
代码地址如下:http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: 首 ...
- 利用socket.io构建一个聊天室
利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊. socket.io 这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了.其实主要用的东西 ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
- Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室
一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...
- 使用socket.io打造公共聊天室
最近的计算机网络课上老师开始讲socket,tcp相关的知识,当时脑袋里就蹦出一个想法,那就是打造一个聊天室.实现方式也挺多的,常见的可以用C++或者Java进行socket编程来构建这么一个聊天室. ...
- NodeJS+Express+Socket.io的一个简单例子
关键字:NodeJS,Express,Socket.io. OS:Windows 8.1 with update pro. 1.安装NodeJS:http://nodejs.org/. 2.初始化一个 ...
- node+express+socket.io+mysql=通讯服务器搭建（一）
首发github/blog 欢迎大家评论给星 安装 首先假定你已经安装了 Node.js,接下来为你的应用创建一个目录,然后安装express-generator应用骨架 $ mkdir node-d ...
- Socket.io文字直播聊天室的简单代码
直接上代码吧,被注释掉的主要是调试代码,和技术选型的测试代码 var app = require('express')(); var server = require('http').Server(a ...
- 【Java】学习路径55-练习:制作一个聊天室(多线程、UDP、双向传输数据)
创建四个类,实现双向聊天的功能. 接收线程: import java.io.IOException; import java.net.*; public class ReceiveThread imp ...
随机推荐
- JSP里的<c:if>不起作用[待解答]
JSP页面的部分代码如下: 下面的title作为请求参数,shoppingCart作为session范围域的属性. 问题1: 如果去掉<c:if>的判断条件,第一行打印:可以正常显示出来, ...
- node 垃圾回收
一些思考 回收 nodejs垃圾回收 跟浏览器js不同, 以下代码会找出内存泄露 var theThing = null var replaceThing = function () { var o ...
- CUDA Samples: Ray Tracking
以下CUDA sample是分别用C++和CUDA实现的生成光线跟踪图像,并对其中使用到的CUDA函数进行了解说,code参考了<GPU高性能编程CUDA实战>一书的第六章,CUDA各实现 ...
- 关于windows完成端口（IOCP）的一些理解
本人很多年前接触完成端口以来,期间学习和练习了很多次,本以为自己真正地理解了其原理,最近在看网狐的服务器端源码时又再一次拾起完成端口的知识,结果发现以前理解的其实很多偏差,有些理解的甚至都是错误的.网 ...
- ubuntu 终端命令颜色的修改
http://blog.chinaunix.net/uid-13954789-id-3137184.html http://blog.chinaunix.net/uid-26021340-id-348 ...
- Ubuntu下使用openssl为apache2配置ssl
安装apache2 sudo apt-get install apache2 安装openssl 一般系统自带,可以通过openssl version查看,如果没有, sudo apt-get ins ...
- Ubuntu和win双系统删除ubuntu开机出错
Ubuntu和win双系统删除ubuntu开机出错问题. 报错error:unknown filesystem. grub rescue>_ 很简单: 进入pe 打开diskgenius 选择你 ...
- ACM 五一杭电赛码"BestCoder"杯中国大学生程序设计冠军赛小记
对于这项曾经热爱的竞赛,不得不说这是我最后一年参加ACM比赛了,所以要珍惜每一次比赛的机会. 五一去杭电参加了赛码"BestCoder"杯中国大学生程序设计冠军赛,去的队伍包括了今 ...
- 【Codeforces】Round #491 (Div. 2) 总结
[Codeforces]Round #491 (Div. 2) 总结 这次尴尬了,D题fst,E没有做出来.... 不过还好,rating只掉了30,总体来说比较不稳,下次加油 A:If at fir ...
- 语义耦合（Semantic Coupling）
跟小伙伴一起重构一段 UI,试图将用户界面和业务代码分离的时候,小伙伴试图在业务代码中直接调用 UI.我们当然都知道这会产生耦合,于是小伙伴试图定义一些属性.变量或接口来解决这个耦合.虽然在代码的静态 ...