Socket.io实时通信的一些杂论_前端实现实时更新数据scoket.io-CSDN博客

本文链接：https://blog.csdn.net/weixin_50112395/article/details/126788575

WebSocket实时通讯之socket-io

作者前言

亲爱的读者，最近应为一些原因无法更新博客文章在这里对大家表示深深的歉意，现在解决了那些麻烦事了，应该能做到日更了，感谢大家的支持谢谢！

关于WebSocket

Websocket 可以实现浏览器与服务器之间的即时通讯业务是一款基于长连接模式的协议，客户端与服务端之间一旦建立起来websocket链接，二者就可以随时随地的进行通讯

网络通信中的长连接与短链接

短连接

短连接：客户端向服务端发送建立链接的请求，一旦连接建立完成之后，客户端向服务端发送消息，服务端接收并处理，返回响应连接断开
在这里插入图片描述

短链接可以很好的优化服务端的资源利用率
比如HTTP协议是一款基于短链接模式的协议，意味着连接建立完毕之后，客户端向服务端发送请求之后服务器响应或超时之后就会断开，如果希望再次链接就只能再去发送请求

长连接

长连接：客户端向服务端发送建立链接的请求，一旦连接建立完成之后，客户端向服务端发送消息，服务端接收并处理，返回响应之后链接不断开，两端还可以通过该链接进行后续的数据交互
在这里插入图片描述

长连接可以实现客户端与服务器之间的即时通讯

socket.io框架

安装

后端

npm install socket.io

前端导入

一般情况下，Socket.io搭建好的服务器在会静态托管前端js文件 /socket.io/socket.io.js所以一般是需要导入注册即可

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
</script>

Socket.io简介

Socket.io是一款封装了webSocket操作的网络操作库。提供了一些简单的API方法，使得浏览器可以方便的与服务器段建立websocket链接，并且通过该链接进行通讯
官方文档：传送门
中文文档：传送门

后端项目

1，在安装好模块的目录下新建一个js文件命名随意
2，我们一般会使用socket-io配合http服务器使用，所以我们接下来就讲这个代码的书写和搭建方式，模块如下

npm init -y 
// 初始化项目包
npm i express
// 安装express
npm i cors
// 安装cors模块解决跨域
npm i socket.io
// 安装Socket.io

3，书写如下代码

const express = require('express');
// 导入express模块
const app = express();
const http = require('http');
// 导入http模块
const server = http.createServer(app);
// 注册http服务器
const { Server } = require("socket.io");
const io = new Server(server, {
  cors:{
    origin: '*'
  }
});
// 解决跨域
io.on('connection', (socket) => {
  console.log('有客户端连进来了:'+socket.id);
  socket.on('textmsg', function(data){
    // 接收到某客户端发的消息后，给所有人群发一遍即可
    io.emit('textmsg', data)   
  })
});
// io.on() 用于监听websocket事件   connection为连接建立成功事件
// 一旦客户端向服务端发送请求建立连接，连接建立成功后将触发该事件，
// 将立即执行第二个参数：回调方法
server.listen(3000, () => {
  console.log('websocket服务已启动，正在监听 *:3000');
});
// 监听端口

然后启动服务

node app.js
// 这个app.js是我创建的js文件命名

如下图
在这里插入图片描述
前端页面构建
创建一个前端html页面

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Socket.io</title>
	</head>
	<body>
        <script src="./scripts/socket.io.js">

        </script>
        <script></script>
    </body>
</html>