数据通信 websocket、socket.io 基础学习

概述

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换更加简单，允许服务端主动向客户端推送数据。

特点：
1.性能比传统ajax要更高，快几倍
2.真正实现双向通信

双向通信

ajax轮循
以往实现"双向通信"，以新闻首页消息，是通过ajax轮循实现
如下图：
前端每隔一段时间，就向服务器发出请求，如果服务器有新数据则返回新数据，没有则返回空
大部分时间是无用功，这是一种消耗服务器性能的状态

ajax轮循

websocket方式
利用websocket方式实现
流程：
浏览器向服务器发出http请求，服务器返回同意信息，完成（握手），之后建立一个长连接
在这个连接状态下，服务器可以向浏览器发出信息，浏览器也可以向服务器发出信息

websocket

握手的一些WEB信息

握手

长连接，短连接

首先要了解互联网通信5层

通信5层

针对上图:
主要的差异是在于传输（TCP）层的连接状态是否在第一次数据请求后断开

区别

1.短连接：
浏览器和服务器每进行一次HTTP操作，就建立一次连接，但任务结束就中断连接

2.长连接：
当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的 TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接

socket.io第三方插件

使用原生websocket是困难的，使用socket.io库，可以提高开发效率，极大减轻学习成本

优点：
1.简单
2.兼容全面，一直到IE5
3.自动解析结果
4.内部封装跨域功能
5.安全性比http更厉害
6.会比http更省资源
7.断开自动重连

安装socket.io

1.初始化项目

npm init -y

2.安装socket.io (如果没有cnpm，需要优先去安装)

cnpm install socket.io -D

使用socket.io

前端代码:
js文件socket.io.js是一个解析前的地址，
真实解析的路径：
node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js

<script src="http://localhost:8080/socket.io/socket.io.js" charset="utf-8"></script>
<script>
let sock = io.connect('ws://localhost:8080/');

//发送信息
sock.emit('ts1',100,200);

//接收数据
sock.on('ts2',val=>{        
    console.log(val); //1000
});
</script>

后台代码

const http = require('http');
const io = require('websocket.io');

//1.建立http
let server = http.createServer((req,res)=>{})
server .listen(8080);

//2.建立ws        
let wsServer = io.listen(server);
wsServer.on('connection',sock=>{
    //发送信息
    sock.emit('ts2',1000);

    //接收信息
    sock.on('ts1',function(val1,val2){ 
        console.log(val1,val2); //100 200
    })
})

socket.io方法
emit发送，on接收

sock.emit('事件名',数据);
sock.on('事件名',回调函数);