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 ...
随机推荐
- vue.js 源代码学习笔记 ----- instance index
import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from ...
- python_安装第三方库
1.有一个专门可下载安装第三方库的网址: http://www.lfd.uci.edu/~gohlke/pythonlibs/ Ctrl+f 搜索要下载的第三方库,并下载 2.库文件都是以 whl ...
- asp页面快速找到菜单按钮转向的页面的方法
asp页面快速找到菜单按钮转向的页面的方法: 鼠标放在按钮上,右键属性即可查看
- wxWidgets的配置
参考 :http://www.codeproject.com/Articles/11515/Introduction-to-wxWidgets 我是将D:\wxWidgets-3.0.1,中 编译过 ...
- 【转】react-native开发混合App-github开源项目
http://www.lcode.org/study-react-native-opensource-one/ http://gold.xitu.io/entry/575f498c128fe10057 ...
- CentOS常用命令汇总
将新创建的数据分配某个用户访问 grant all privileges on zhouzdb.* to 'zhouz'@'%' identified by '1234'; flush privile ...
- 基于视觉的 SLAM/Visual Odometry (VO) 开源资料、博客和论文列表
基于视觉的 SLAM/Visual Odometry (VO) 开源资料.博客和论文列表 以下为机器翻译,具体参考原文: https://github.com/tzutalin/awesome-vis ...
- 64位系统下注册32位dll、ax文件
64位系统下注册32位dll.ax文件. 换了64位系统遇到的新问题,目前常用的影音处理软件多数为32位. 注册这些32的滤镜会提示不兼容,大概因为32 位进程不能加载64位Dll,64位进程也不可以 ...
- C++ 回调函数的几种策略
Stackoverflow中提出了这样一个问题:假设我们实现了一个User类,Library类,现在Library类中utility需要回调User中func方法,总结答案,常见的几种方法如下: 静态 ...
- Spring 管理Filter和Servlet
本文转载自:http://www.open-open.com/lib/view/open1417248512252.html 在使用spring容器的web应用中,业务对象间的依赖关系都可以用cont ...