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 ...
随机推荐
- Ubuntu12.04下samba服务器共享配置
1 . 前置工作 首先保证你的Ubuntu能上网:虚拟机网络连接方式为NAT:虚拟机雨物理机互ping可通: 2. 安装samba sudo apt-get insall samba sudo apt ...
- iOS系统知识架构（转）
转载的,哪些所谓的资深开发,谁敢说自己没有知识盲区?http://ios.skyfox.org/route.html
- 添加机构organizations模块
startapp organizations models内容: from django.db import models from datetime import datetime # Create ...
- 浅谈js异步
大家都知道,js是一个单线程的语言(只有一个线程来执行js函数),所以如果某一个函数执行任务耗时比较长的话,就会造成阻塞,使得后续任务一直处于等待状态. 一.阻塞示例 function f1(){ ; ...
- React-Native进阶_2.加载指示动画 ActivityIndicator
在安卓原始 App中使用的加载框 ProgressBar 在React -Native 中也是有相对应的视图,叫做ActivityIndicator,对应ios 中React-Native 提供的是 ...
- MarkDown初学
什么是MarkDown? 第一次用这个MarkDown,感觉很好,界面友好,使用简洁而又使用,最主要的是此园支持这个语法,欣慰欣慰!先这么多,看看效果如何 推荐个不错的学习网站 Markdown 语法 ...
- 使用Percona Xtrabackup创建MySQL slave库
一.使用Percona Xtrabackup创建MySQL slave库 MySQL Server 版本: Server version: 5.7.10-log MySQL Community Ser ...
- System.Net.FtpClient改进
项目用到Ftp,搜了下现有的类库System.Net.FtpClient 貌似比较不错. 一开始用着还行,但是有个FtpServer下有8k多内容,列表需要很久(7.8s)才能刷新出来. 翻源码吧,有 ...
- BZOJ4550: 小奇的博弈（NIMK博弈& 组合数& DP）
4550: 小奇的博弈 Time Limit: 2 Sec Memory Limit: 256 MBSubmit: 159 Solved: 104[Submit][Status][Discuss] ...
- JSON和JSONP简单总结
jsonp和json的区别,原理,在jquery中的使用 http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.h ...