基于Node.js + Web Socket 简易聊天室

本文案例环境为mac系统,你需要先安装nodejs,方法比较简单,直接去nodejs官网下载即可。

环境:

mime

首先通过npm进行安装

  • 在我们的项目文件夹下打开命令行(tip: 按住Shift同时右击,可以在右键菜单中找到'从此处打开命令行'选项)
  • 在命令行中输入 npm install mime --save 回车进行安装
  • 然后在chat.js中通过require('mime')将其引入到项目中进行使用

mime是node.js中管理路由响应请求的模块,根据请求的URL返回相应的HTML页面

 

socket.io

Node.js中使用socket的一个包。使用它可以很方便地建立服务器到客户端的sockets连接,发送事件与接收特定事件。

同样通过npm进行安装 npm install socket.io --save 。安装后在node_modules文件夹下新生成了一个socket.io文件夹,其中我们可以找到一个socket.io.js文件。将它引入到HTML页面,这样我们就可以在前端使用socket.io与服务器进行通信了。

 

注:在浏览器中用本地localhost打开

以下是代码,主要是htlm部分  css部分  js部分

html文档以及处理客户端部分js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h9聊天室-beta版</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="chat">
<h2>欢迎来到h5大世界 当前在线人数<span>0</span></h2>
<ul>

</ul>
</div>
<form>
<input type="text" class="message">
<input type="button" value="发送" class="btn"/>
</form>

</body>
<script src="../socket.io/socket.io.js"></script>
<script>
var socket=io('http://10.80.16.238:3000');
var span=document.querySelector('span');
var btn=document.querySelector('.btn');
var list=document.querySelector('ul');
var info=document.querySelector('.message');
btn.onclick=function(ev){
ev.preventDefault();
var message=info.value;
socket.emit('message',{info:message});
}
socket.on('news',function(data){
var num=data.num;
var say=data.say;
var li=document.createElement('li');
li.innerHTML=say;
list.appendChild(li);
span.innerHTML=num;
})
</script>
</html>


CSS部分:
body{
margin: 0 auto;
background-color:lightgray;
}
.chat{
width:800px;
min-height:400px;
background-color:lightblue;
margin: 0 auto;
}

.chat h2{
height:40px;
line-height: 40px;
background-color:gold;
font-size: 20px;
text-align: center;
}
ul{
list-style-type:none;
margin: 0;
padding: 0;
}
li{
height:30px;
line-height: 30px;
font-size: 20px;
}
form{
width:800px;
margin:50px auto;
}
.message{
width:600px;
height:60px;
font-size:20px;
}
.btn{
width:100px;
height:30px;
background-color: aqua;
font-size:20px;
}


服务端js: chat.js文件

var http=require('http');
//创建服务器
var server=http.createServer(handle);
var fs=require('fs');

var mime=require('mime');

//绑定服务器
var io=require('socket.io')(server);

function handle(req,res){
console.log(req.url)
var filePath='';
if (req.url=="/"){
filePath="./html/index.html"
}else{
filePath="."+req.url
}
Static(res,filePath)
}
function Static(res,filePath){
fs.exists(filePath,function(exist){
if (exist){
fs.readFile(filePath,function(err,data){
if(err){
send404(res)
}

res.writeHead(200,{
'Content-Type':mime.lookup(filePath)
})
res.end(data)
})
}else{
send404(res)
}
})
}
server.listen(3000,function(){
console.log('go go go')
});


function send404(res){
res.writeHead(404,{
'Content-Type':'text/plain'
})
res.end('404, sorry not found')
}

//发送,接收信息
var num=1;
io.on('connection',function(socket){
num++;
// on 事件名,接受回调
// 服务端要和客户端一一对应
socket.on('message',function(data){
console.log(data.info);
// emit 事件名,{发射主体}
io.sockets.emit('news',{name:'wj',num:num,say:data.info});
})
})


 

posted @ 2016-11-11 18:07  梦梧桐  阅读(289)  评论(0编辑  收藏  举报