您的位置：首页 > Web前端 > Node.js

Node.js基于浏览器聊天室

2016-08-21 21:53 190 查看

1、新建一个index.html文件，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="javascripts/jquery-1.11.1.min.js"></script>
<script src="javascripts/socket.io-1.4.5.js"></script>
<style>
*{padding: 0;margin: 0}
p{}
table {
width: 100%;
}
.p2{background: pink;}
.p1{background: rgb(106, 216, 255);}
.p1,.p2{border: 1px solid pink;padding: 10px;border-radius: 5px;display:inline-block}
span{margin: 5px 0px;}
table.tool {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
}

#content {
height: auto;
padding: 10px;
padding-bottom: 32px;
}

#content tr {
margin-bottom: 10px;
}
#textContent {
border: 1px solid rgb(106, 216, 255);
border-radius: 5px;
padding: 6px;
}

.left {
width: 75%;
}

#send {
width: auto;
padding: 2px 12px;
margin: 0 10px;
line-height: 26px !important;
border-radius: 5px;
font-weight: bold;
color: white;
border: 0px;
background-color:rgb(106, 216, 255);
}
#findmsg {
width: auto;
padding: 2px 12px;
line-height: 26px !important;
border-radius: 5px;
font-weight: bold;
color: white;
border: 0px;
background-color:pink;
}
.timer {
display: block;
text-align: center;
}
</style>
</head>
<body style="background: url(images/47.jpg) ;background-repeat: no-repeat;background-size:100%">
<div>
<table id="content">
</table>
</div>

<table class="tool">
<tr>
<td class="left">
<div id="textContent" contenteditable="true" type="text"></div>
</td>
<td>
<button id="send">发送</button>
<!--
<button id="findmsg">查看聊天记录</button>
-->
</td>
</tr><div id="nav"></div>
</table>

<script>
var socket = io.connect('http://192.168.105.253:3000');
var userName = "访客某某";
socket.on('connect', function () {
userName = prompt("请输入你的姓名?") || userName;
socket.emit('join', userName);
});
socket.on('chat', function (user, data) {
var p = document.createElement('tr');
var direct = 'align-left';
if (user === userName) {
direct = 'align-right';
p.innerHTML = '<td><p>' + user + '</p><p class="p1">' + data + '</p></td>';
} else {
p.innerHTML = '<td style="text-align:right"><p>' + user + '</p><p class="p2">' + data + '</p></td>';
}
p.className = direct;
$('#content').appendChild(p);
});

$('#send').addEventListener('click', function (target) {
var content = $('#textContent').innerHTML;
if (content = content.replace(" ", "")) {
socket.emit('sendMSG', content);
$('#textContent').innerHTML = "";
}
});

$('#findmsg').addEventListener('click', function (target) {
socket.emit('getMSG', content);
});
function $(flag) {
return document.querySelector(flag);
}
</script>

</body>
</html>

2、新建一个chat.js文件，代码如下：

var express = require('express');
var router = express.Router();
var socket_io = require('socket.io');
var db = require('../model/mongoose');
/* GET users listing. */
router.get('/', function (req, res, next) {
res.send('respond with a resource');
});

router.prepareSocketIO = function (server) {
var io = socket_io.listen(server);
var clientList = [];
var interlocutors = [];
io.sockets.on('connection', function (socket) {//连接

clientList.push(socket);
console.log("连接人数：" + clientList.length);
console.log("连接数据" + socket);
socket.on('join', function (user) {//获取名称

socket.user = user;

var socketusers ={ user_name:user}
db.socketuserModel.findOne(socketusers,function(error, result){
console.log('he'+result+error);
if(result ==null ){

db.socketuserModel.create(socketusers, function(error){});

}
});

//socket.emit('state', 'SERVER', true);
//socket.broadcast.emit('state', 'SERVER', user + '上线了');//广播名字
});
socket.on('sendMSG', function (msg) {//发送内容存入数据库
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var times = year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
var socketusersmsg ={ user_name:socket.user,send_msg:msg,send_time:times}
db.socketusermsgModel.create(socketusersmsg, function(error){});
socket.emit('chat', socket.user, msg);
socket.broadcast.emit('chat', socket.user, msg);//广播内容
});

socket.on('getMSG', function (msg) {//获取聊天记录

var usersmsg ={ user_name:socket.user}
db.socketusermsgModel.find(usersmsg,function(error, result){
console.log('he'+result+error);
for(var i=0;i<result.length;i++){
console.log(result[i].send_msg);
}
})//.sort({send_time:-1}).limit(1);
//socket.emit('chat', socket.user, msg);
//socket.broadcast.emit('chat', socket.user, msg);
});
});

};

module.exports = router;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 浏览器聊天 node.js

相关文章推荐

新的分享

章节导航