这个聊天室室只是实现简单的聊天功能样式不怎么好看,喜欢的人可以拿去修改完善一下,就可以成型了。
聊天的记录我保存在文件里,方便查看!
1.搭建运行环境
安装
npm i express --save
npm i socket.io --save
创建src目录用于存放自己要写的文件,在目录下建src/chat.html、src/chatHistory.txt两个文件。
建一个server.js作为后台服务器:
//引入程序包
var express = require('express')
var path = require('path')
var app = express()
var server = require('http').createServer(app)
var io = require('socket.io').listen(server)
var fs = require('fs')
//设置日志级别
// io.set('log level', 1);
//WebSocket连接监听
io.on('connection', function (socket) {
//通知客户端已连接
socket.emit('open')
// 构造客户端对象
var client = {
socket:socket,
name: false,
color:getColor()
}
// 对message事件的监听
socket.on('message', function(msg){
// 设置时间
var obj = {
time:getTime(),
color:client.color
}
// 第一次连接,以第一条消息作为用户名
if(!client.name){
client.name = msg
obj['text']=client.name
obj['author']='System'
obj['type']='welcome'
console.log(client.name + ' login')
//返回欢迎语
socket.emit('system',obj)
//广播新用户已登陆
socket.broadcast.emit('system',obj)
}else {
//如果不是第一次的连接,正常的聊天消息
obj['text'] = msg
obj['author'] = client.name
obj['type'] = 'message'
// 聊天记录写入文件 fs.writeFile(filename, data, [options], callback)
// flag: 'a' 改为追加模式 不覆盖前面内容
filename = 'src/chatHistory.txt'
data = getTime() + ':' + '\n'+ client.name + ':' + msg + ';' + '\n'
fs.writeFile(filename, data,{flag:'a'}, function(err){
if(err) throw err
console.log('写入成功!')
})
// 返回消息(可以省略)
socket.emit('message',obj)
// 广播向其他用户发消息
socket.broadcast.emit('message',obj)
}
})
//监听退出事件
socket.on('disconnect', function () {
var obj = {
time:getTime(),
color:client.color,
author:'System',
text:client.name,
type:'disconnect'
}
// 广播用户已退出
socket.broadcast.emit('system',obj)
console.log(client.name + '离线')
})
})
// 指定webscoket的客户端的html文件
app.get('/', function(req, res){
res.sendFile(__dirname + '/src/chat.html')
})
server.listen(3000, function(){
console.log('port: 3000')
})
var getTime=function(){
var date = new Date()
return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
}
var getColor=function(){
var colors = ['aliceblue','antiquewhite','aqua','aquamarine','pink','red','green',
'orange','blue','blueviolet','brown','burlywood','cadetblue']
return colors[Math.round(Math.random() * 10000 % colors.length)]
}
chat.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>nodejs在线聊天室</title>
</head>
<style>
* {
padding:0px;
margin:0px;
}
body{
font-family:tahoma;
font-size:12px;
margin:10px;
}
p {
line-height:18px;
padding:2px;
}
div {
width:500px;
}
#content {
padding:5px;
background:#ddd;
border-radius:5px;
border:1px solid #CCC;
margin-top:10px;
min-height: 300px;
}
#input {
border-radius:2px;
border:1px solid #ccc;
margin-top:10px;
padding:5px;
width:100%;
}
#status {
width:100px;
display:block;
float:left;
margin-top:15px;
}
h2{
text-align: center;
color: blue;
}
.input-box{
position: fixed;
bottom: 10%;
left: 0;
}
</style>
<body>
<div id="content"></div>
<div class="input-box">
<span id="status">加载中....</span>
<input type="text" id="input"/>
</div>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function () {
var content = $('#content')
var status = $('#status')
var input = $('#input')
var myName = false
//建立websocket连接
socket = io.connect('http://localhost:3000')
//收到server的连接确认
socket.on('open',function(){
status.text('输入一个昵称:')
})
//监听system事件,判断welcome或者disconnect,打印系统消息信息
socket.on('system',function(json){
var p = ''
if (json.type === 'welcome'){
if(myName==json.text) status.text(myName + ': ').css('color', json.color)
p = '<p style="background:'+json.color+'">系统消息 @ '+ json.time+ ' : 欢迎 ' + json.text +'</p>'
}else if(json.type == 'disconnect'){
p = '<p style="background:'+json.color+'">系统消息 @ '+ json.time + ':'+ json.text + ' 下线 ' +'</p>'
}
content.append(p)
})
//监听message事件,打印消息信息
socket.on('message',function(json){
var p = '<p><span style="color:'+json.color+';">' + json.author+'</span> : '+ json.time+ ' : '+json.text+'</p>'
content.append(p)
})
//通过“回车”提交聊天信息
input.keydown(function(e) {
if (e.keyCode === 13) {
var msg = $(this).val()
if (!msg) return
socket.send(msg)
$(this).val('')
if (myName === false) {
myName = msg
}
}
})
})
</script>
聊天记录写入文件:
没有录屏工具,调试的话自己调就行,nodejs就分享这些了,我感觉做的还有一些问题