node.js(一) web Socket 仿微信聊天室
2017-10-09 本文已影响222人
无迹落花
Socket.io是Node.js的一个模块,它展现出一些让Node.js与其它语言如(c++、java、php、python)等不同的地方。本篇博客将给予Node.js的Socket.io模块,创建实时的应用程序,仿微信的在线聊天系统。
1. 创建一个文件夹，暂且命名为 wechat
2. 在wechat文件夹中，创建一个名为package.json的新文件,并添加如下内容将Socket.io申明为依赖模块：
{
"name": "socket.io",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"socket.io": "2.0.3"
},
"author": "lv",
"license": "ISC"
}
3. 在wechat文件夹中，创建一个带有如下内容的、名为app.js的新文件：
var http=require('http')
var fs=require('fs')
var server=http.createServer((req,res)=>{
fs.readFile('./index.html',(err,data)=>{
res.writeHead(200,{'Content-Type':'text/html'})
res.end(data,'utf-8')
})
}).listen(3000,'127.0.0.1')
console.log('服务器运行在 127.0.0.1:3000端口')
var io=require('socket.io').listen(server)
io.sockets.on('connection',(socket)=>{
socket.on('message',(data)=>{
socket.broadcast.emit('push message',data)
})
})
4.在wechat文件夹中,创建一个带有如下内容的、名为index.html的新文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>客户端socket聊天室</title>
</head>
<body>
<!-- 主容器,设置居中 -->
<div class="content">
<!-- 这个class为main的用来存放聊天信息 -->
<div class="main">
<p style="height: 15px;"></p>
</div>
<form id="message-form">
<input id="message" rows='4' cols='30' value="" autocomplete="off" placeholder="输入想要发送的消息.."></input>
<button>点击发送</button>
</form>
</div>
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket=io.connect('http://127.0.0.1:3000')
var message=document.getElementById('message')
//写个button 点击发送
$('button').click(()=>{
// 判断一下内容是否为空,若用户输入了空的内容,则不能发送！
if($("#message")[0].value==null || $("#message")[0].value==''){
console.log('内容为空！ 请重新输入');
}else{
socket.emit('message',{text:message.value})
//console.log(message.value);
$('.main').append('<p class="p1">'+' '+' '+message.value+' '+' '+'</p>'+'<br/>'+'<br/>'+'<p style="height: 16px;">'+'</p>');
// 点击发送后,将input框里面的内容清空！
$("#message")[0].value='';
return false
}
})
socket.on('push message',(data)=>{
console.log(data.text)
$('.main').append('<p class="p2">'+' '+' '+data.text+' '+' '+'</p>'+'<br/>'+'<br/>'+'<p style="height: 16px;">'+'</p>')
})
</script>
<style type="text/css">
*{
padding: 0;
margin: 0
}
.main{
width: 800px;
height: 400px;
margin: 20px auto;
overflow: auto;
border: 1px solid gray;
background: #eee;
}
.content{
width: 800px;
height: 600px;
/*border: 1px solid red;*/
margin: 0 auto;
}
#message-form{
float: right;
}
.p1{
margin-right: 10px;
line-height: 40px;
display: block;
float: right;
text-align: right;
border-radius: 2px;
background: #b2e281;
}
.p2{
margin-left: 10px;
line-height: 40px;
display: block;
float: left;
text-align: left;
border-radius: 2px;
background: white;
}
</style>
</body>
</html>
5. 终端运行如下命令，安装依赖模块
npm i
6. 从终端运行如下命令启动服务器：
node app
7. 打开浏览器访问 127.0.0.1:3000
8. 打开另一个浏览器选项卡访问 127.0.0.1:3000
9. 在那个输入框里面输入聊天信息，我们发现可以自己与自己聊天了
可以看到已经可以自己跟自己聊天了，仅限于本地聊天。
001.PNG
002.PNG
