nodejs建立长连接模块socket.io
长连接
服务器端发送完新数据也不断开连接，继续等待下一份新数据，除非超过了一定时限（即自定义的最大连接空闲时长，浏览器可以超时重连）
WebSocket
什么是websocket?
用于建立客户端和服务端的双向交互通信,打开一条会话通道,让双方可以进行实时通信
这个链接的每一端就被称为socket,避免了使用传统的轮询方式来实现通信
websocket和socket.io之间的区别是什么?
socket.io是一个开源库,他是对websocket进行的封装
增强了浏览器的兼容性
使用起来更方便,功能也更强大
引入依赖包
npm i express -S、npm i socket.io -S
可以依照socket.io官方文档要求添加
服务器talkServer.js
const express = require('express');
const app = express();
//socket.io官方文档要求添加
const server = require('http').createServer(app);
const io = require('socket.io')(server);
//记录一下有几个人连接上了服务器
var userId = 0;
//监听connection事件,只要有客户端连接就执行回调函数
io.on('connection',(socket)=>{
var user = ++userId;//当前连接到的用户的编号
//socket就是连接到服务器的那个客户端
//接收客户端消息
//监听客户端的一个事件,事件名称自己定义
socket.on('msg-from-client',function(data){
io.emit('msg-from-server',user+"------>"+data)
})
//向客户端分发消息
io.emit('msg-from-server',user+'------上线了')
})
//socket.io官方文档要求开启端口监听使用server
server.listen(7777);
客户端webServer.js
const express = require('express');
const app = express();
//开启静态资源服务器
app.use(express.static('./public'));
app.listen('8888')
webServer.js中的静态文件talk.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 550px;
margin:50px auto;
border:1px solid #ccc;
position: relative;
}
.top{
position: absolute;
top:20px;
left:20px;
right:20px;
bottom:80px;
overflow: auto;
}
.bottom{
position: absolute;
bottom:20px;
left:20px;
right:20px;
}
#message{
width: 300px;
height: 30px;
border:1px solid #ccc;
line-height: 30px;
float: left;
padding-left:10px;
box-sizing: border-box;
}
#send{
width: 50px;
float:right;
height: 30px;
}
.row{
line-height: 35px;
}
</style>
</head>
<body>
<div class="box">
<div class="top">
</div>
<div class="bottom" style="color: red;font-size: 200px;">
<input type="text" id="message">
<input type="button" value="发送" id="send">
</div>
</div>
<script src="/jquery-1.12.4.js"></script>
<!--
我们下载的socket.io这个包里面有一个文件夹叫做socket.io-client,里面的dist/socket.io.js
把这个文件拷贝到前端静态资源服务器里面
-->
<script src="/socket.io.js"></script>
<script>
//引入socket.io.js以后就会有一个io方法,通过io连接服务端
var socket = io('http://请求连接的服务端域名地址:7777');
//记录下一共有多少条消息
var count = 0;
//监听服务器发送给客户端消息的事件
socket.on('msg-from-server',function(data){
count++;
//把接收到的服务器消息,显示在聊天框里面
$('.top').append('<div class="row">'+data+'</div>');
$('.top').scrollTop(count*35);
})
//点击send给服务端发消息
$('#send').click(function(){
socket.emit('msg-from-client',$('#message').val());
$('#message').val('')
})
//在message里面按回车也可以发消息
$('#message').keyup(function(e){
if(e.keyCode==13){
socket.emit('msg-from-client',$('#message').val());
$('#message').val('')
}
})
</script>
</body>
</html>
