1.express后端框架
2.socket.io封装了多种协议的webscoket库
1.项目搭建：
npm init
npm express
npm install socket --save
利用bootstrap构建前端部分，安装bootstap :npm install bootstrap@3
2.目录结构：
3.index.js文件
const express = require('express')
const app = express()
const server = require('http').createServer(app);
const io = require('socket.io')(server);
var count=0;
//socket服务器监听连接 表示已经连接
io.on('connection', (socket) => {
//发送一个事件消息
// socket.emit('request', /* … */);
// // 发送一个时间消息给所有客户端
// io.emit('broadcast', /* … */);
// setInterval(function(){
// io.emit('msg','hello world'+(new Date()))
// },1000)
//监听登录消息
socket.on('login', (data) => {
//将用户名保存到socket对象中
socket.username=data
console.log(data+'登录了')
count++;
io.emit('count',count)
});
//监听客户端发来的事件
socket.on('send', (data) => {
console.log('客户端发来的消息'+data)
var time=new Date()
var y=time.getFullYear()
var m=time.getMonth()+1
var d=time.getDate()
var h=time.getHours()
var mi=time.getMinutes()
var s=time.getSeconds()
var times=`${y}-${m}-${d} ${h}:${mi}:${s}`
io.emit('msg',{user:socket.username,msg:data,times:times})
});
socket.on('disconnect',()=>{
count--;
io.emit('count',count)
})
});
//添加静态文件中间件
app.use(express.static(__dirname+'/static'))
app.get('/', function (req, res) {
res.send('Hello World')
})
app.get('*', function (req, res) {
res.sendFile(__dirname+'/view/1.html')
})
server.listen(3000);4.index.html页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>聊天室</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>WebSocket多人聊天室<span id='chat-count'></span></h1>
<div class="row" id="login">
<div class="col-md-12">
<form>
<div class="form-group">
<label for="username">name</label>
<input type="email" class="form-control" id="username" placeholder="请输入昵称">
</div>
<button type="submit" class="btn btn-success" id="show-btn">提交</button>
</form>
</div>
</div>
<div class="row" id="content">
<div class="col-md-12" id="chatcon">
</div>
<div class="col-md-12">
<textarea id="msgcon" class="form-control" rows="3"></textarea>
<button class="btn btn-success" id="send-btn">提交</button>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket;
var uname;
//创建模板
function createTpl(data,flag){
var str='';
str+=` <div class="con-item">
<p><span class="btn btn-info">${flag?'我':data.user }</span> <span class="label label-default">${data.times}</span></p>
<p><span class="alert alert-${flag?'success':'warning'}">${data.msg}</span></p>
</div>`
return str;
}
$('#show-btn').on('click',function(){
uname=$.trim($('#username').val());
console.log(uname)
if(uname==' '){return;}
$('#login').hide();
$('#content').show();
socket = io('ws://localhost:3000');
//连接成功后向后端发送登录的信息
socket.on('connect', function(){
socket.emit('login',uname)
});
//将接收到的消息显示
socket.on('msg', function(data){
var flag=data.user==uname;
var tpl=createTpl(data,flag);
$('#chatcon').append(tpl);
});
socket.on('disconnect', function(){
console.log('断开连接')
});
socket.on('count',function(data){
$('#chat-count').html('('+data+')人')
})
})
$('#send-btn').on('click',function(){
socket.emit('send',$('#msgcon').val())
$('#msgcon').val('')
})
</script>
</body>
</html>5.css代码
#login{
display: block;
}
#content{
display: none;
height: auto;
border: 2px solid #ccc;
border-radius: 4px;
}
.alert {
padding: 7px;
}
.con-item{
padding: 10px 10px;
}
.form-control{
margin: 5px 6px;
}webSocket实现了浏览器和服务器的全双工通信。一开始握手需要借http完成。 网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务 器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器 需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分， 显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以 通过 TCP 连接直接交换数据。 websocket将服务器的被动升级为主动；即服务器端可主动推送消息给客户端。传统的http每次发消息都需要建立连接，而webSocket只需要一次http握手。避免了http的无状态的特点。同时将由客户端主动询问转换为服务器主动发送。
