使用Socket.io实现实时更新聊天记录
1.先了解什么是WebSocket
WebSocket 连接本质上就是一个 TCP 连接，WebSocket会通过http请求建立，建立后的WebSocket会在客户端和服务器端建立一个持久的连接，直到有一方主动的关闭了该连接。所以现在服务器就知道有哪些用户正在连接了，这样通讯就变得相对容易了。
2.Socket,io
Socket.io实际上是WebSocket的父集，Socket.io封装了WebSocket和轮询等方法，他会根据情况选择方法来进行通讯。
二.demo操作如下
1.创建一个文件夹后终端打开
初始化
npm init -y
安装express和socket,io
cnpm install --save express socket.io
2.然后新建一个public/01.html和app.js的文件
01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群聊</title>
</head>
<body>
<h1>群聊</h1>
<div style="width: 30%; float: left">
输入:<input type="text" id="msginput">
<button id="msgbtn">发送</button>
</div>
<div style="width: 65%; float: right" id="showbox">
</div>
</body>
<script src="/socket.io/socket.io.js">
// 这个script标签访问数据就相当访问了127.0.0.1:3000/socket.io/socket.io.js,浏览器打开其实就是socket.io插件源码
</script>
<script>
let socket = io.connect('http://localhost:3000');
let btn = document.getElementById('msgbtn');
let msginput = document.getElementById('msginput');
let showbox = document.getElementById('showbox');
btn.addEventListener('click', (event) => {
let msg = msginput.value;
let data = {msg: msg};
socket.emit('sendMessage', data);
});
socket.on('receiveMessage', (data) => {
console.log('收到');
console.log(data);
let message = document.createElement('div');
message.innerHTML = `收到的新消息是: ${data.msg}`;
showbox.appendChild(message);
})
</script>
</html>
介绍:
io,connect: 这里面的路径实际上代表的是命名空间，这里是默认的命名空间“/”，如果URL是“http://localhost/abc"那就代表http请求连接到localhost下的abc命名空间中，如果不理解暂时当公式记住，到命名空间那一节再详细讲解。
socket,on：这个会jquery和node的应该就能猜出来了，这就是一个注册事件的api，实际上，我们通过socket.io进行通讯主要就是操作各种事件，这里注册了一个叫”new“的事件，服务器可以触发来实现客户端与服务器的交互。
在app.js里,操作如下
// 服务器端
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
server.listen(3000, () => {
console.log('server running at 127.0.0.1:3000');
});
app.use(express.static('./public'));
/* socket.io 逻辑 */
io.on('connection', (socket) => {
socket.on('sendMessage', (data) => {
data.id = socket.id;
io.emit('receiveMessage', data);
})
}
)
3.在终端中运行app.js,开启服务器
4.在服务器模式下浏览,在不同的窗口输入内容,另一个窗口数据自动会发生变化
这样就实现了双向通信啦
总结:这样使用Socket.io轻易实现实时更新聊天记录(即不同的窗口实时更新数据)
最终效果如图: