socket 通信

应用场景：

• 直播间聊天
• 弹幕
• 协同编辑

一 什么是websocket

• WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）
• 它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的
• Websocket是一个持久化的协议

二 websocket的原理

• websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信
• 在websocket出现之前，web交互一般是基于http协议的短连接或者长连接
• websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"

三 websocket与http的关系

相同点：

• 都是基于tcp的，都是可靠性传输协议
• 都是应用层协议

不同点：

• WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息
• HTTP是单向的
• WebSocket是需要浏览器和服务器握手进行建立连接的
• 而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接

二者联系：

• WebSocket在建立握手时，数据是通过HTTP传输的
• 但是建立之后，在真正传输时候是不需要HTTP协议的

总结（总体过程）：

• 首先，客户端发起http请求，经过3次握手后，建立起TCP连接；http请求里存放WebSocket支持的版本号等信息，如：Upgrade、Connection、WebSocket-Version等；
• 然后，服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据；
• 最后，客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信

四 websocket解决的问题

1、http存在的问题

• http是一种无状态协议，每当一次会话完成后，服务端都不知道下一次的客户端是谁，需要每次知道对方是谁，才进行相应的响应，因此本身对于实时通讯就是一种极大的障碍
• http协议采用一次请求，一次响应，每次请求和响应就携带有大量的header头，对于实时通讯来说，解析请求头也是需要一定的时间，因此，效率也更低下
• 最重要的是，需要客户端主动发，服务端被动发，也就是一次请求，一次响应，不能实现主动发送

2、long poll(长轮询)

• 对于以上情况就出现了http解决的第一个方法——长轮询
• 基于http的特性，简单点说，就是客户端发起长轮询，如果服务端的数据没有发生变更，会 hold 住请求（挂起），直到服务端的数据发生变化，或者等待一定时间超时才会返回。返回后，客户端又会立即再次发起下一次长轮询
• 优点是解决了http不能实时更新的弊端，因为这个时间很短，发起请求即处理请求返回响应，实现了“伪·长连接”

张三取快递的例子，张三今天一定要取到快递，他就一直站在快递点，等待快递一到，立马取走

从例子上来看有个问题：

假如有好多人一起在快递站等快递，那么这个地方是否足够大，（抽象解释：需要有很高的并发，同时有很多请求等待在这里）

3、Ajax轮询

• 基于http的特性，简单点说，就是规定每隔一段时间就由客户端发起一次请求，查询有没有新消息，如果有，就返回，如果没有等待相同的时间间隔再次询问
• 优点是解决了http不能实时更新的弊端，因为这个时间很短，发起请求即处理请求返回响应，把这个过程放大n倍，本质上还是request = response

举个形象的例子（假设张三今天有个快递快到了，但是张三忍耐不住，就每隔十分钟给快递员或者快递站打电话，询问快递到了没，每次快递员就说还没到，等到下午张三的快递到了，but，快递员不知道哪个电话是张三的，（可不是只有张三打电话，还有李四，王五），所以只能等张三打电话，才能通知他，你的快递到了）

从例子上来看有两个问题：

假如说，张三打电话的时间间隔为10分钟，当他收到快递前最后一次打电话，快递员说没到，他刚挂掉电话，快递入库了（就是到了），那么等下一次时间到了，张三打电话知道快递到了，那么这样的通讯算不算实时通讯？很显然，不算，中间有十分钟的时间差，还不算给快递员打电话的等待时间（抽象的解释：每次request的请求时间间隔等同于十分钟，请求解析相当于等待）

假如说张三所在的小区每天要收很多快递，每个人都采取主动给快递员打电话的方式，那么快递员需要以多快的速度接到，其他人打电话占线也是问题（抽象解释：请求过多，服务端响应也会变慢）

总的来看，Ajax轮询存在的问题：

• 推送延迟
• 服务端压力、配置一般不会发生变化，频繁的轮询会给服务端造成很大的压力。
• 推送延迟和服务端压力无法中和。降低轮询的间隔，延迟降低，压力增加；增加轮询的间隔，压力降低，延迟增高

4、websocket的改进

• 一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。
• 在客户端断开WebSocket连接或Server端中断连接前，不需要客户端和服务端重新发起连接请求。
• 在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实现了“真·长链接”，实时性优势明显。

WebSocket有以下特点：

• 是真正的全双工方式
• 建立连接后客户端与服务器端是完全平等的，可以互相主动请求
• 而HTTP长连接基于HTTP，是传统的客户端对服务器发起请求的模式
• HTTP长连接中，每次数据交换除了真正的数据部分外，服务器和客户端还要大量交换HTTP header，信息交换效率很低
• Websocket协议通过第一个request建立了TCP连接之后，之后交换的数据都不需要发送 HTTP header就能交换数据，这显然和原有的HTTP协议有区别所以它需要对服务器和客户端都进行升级才能实现（主流浏览器都已支持HTML5）

node模块安装

npm i ws

创建一个基础的ws服务 

import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function message(data) {
    console.log('received: %s', data);
  });

  ws.send('something');
});

客户端websocket对象

var ws = new WebSocket("http://localhost:8080");

客户端响应事件

ws.onopen //连接成功
ws.onmessage //收到消息
ws.onerror  //连接失败
ws.onclose  //服务断开

客户端向服务端发送消息

ws.send('一段消息');

群发消息

var websocket = require("ws");
var  WebSocketServer = websocket.WebSocketServer;
//设定端口 创建服务
const wss = new WebSocketServer({ port: 9000 });

wss.clients.forEach(function each(client) {
    //遍历所有连接的客户端
    //排除掉自己
    if ( client != ws && client.readyState === websocket.OPEN) {
        client.send(data,{binary:false});
    }

});

封装消息体

实现用户实名制

var name = '';
ws.onopen = function(){
    //当连接建立起来后执行
  
    console.log('连接。。。。');

    name = prompt("请输入你的名字：")

    //把用户名和消息内容组成一个json对象
    var obj = {
        name:name,
        type:'join'
    }

    console.log(obj);
  	//将对象转换为字符串，并发送
    ws.send(JSON.stringify(obj));
}

5、socket.io

Socket.IO支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作，可靠性和速度同样稳定。

Socket.io是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5

socket.io特点

1. 兼容性强，支持各种版本浏览器
2. 具备断开重连机制，无需二次封装
3. 支持自定义事件，前后端编程一致性

安装扩展

npm  i  socket.io  //注意不少了中间的点

服务端

require('socket.io')(httpServer)

• (httpServer）要绑定的服务器
• 启动socket服务

const http  =  require("http");
const httpServer = http.createServer();
const server = require('socket.io')(httpServer);

server.on('connection',function( socket ){ }）

• 当有客户端连接到服务时去处理业务
• server：创建的socket服务
• socket：连接进服务的客户端实例

server.on('connection', socket => {
    //socket实例
})

socket.on( event , fn ( data) )

• 服务端响应客户端事件
• socekt 客户端实例
• event 自定义事件名称
• fn 回调函数
• data 接收回调函数的参数

//event自定义事件
socket.on('event', data => {
    console.log(data);
});

socket.emit( event , data )

• 服务器往客户端发送消息
• socket 当前连接的客户端
• event 自定义事件名
• data 发送数据，支持字符串，数组，对象

client.emit("event","123")
client.emit("event",{key:val})
client.emit("event",[1,2])

io.sockets.emit( event , data )

将消息发给所有已连接的客户端

io.sockets.emit( 'event' ,  {key:val}  )

遍历获取所有的客户端，并计算在线人数

//方法1
io.sockets.socekts.size //通过map直接获取连接数


//方法2
var ulist = [];
Array.from(io.sockets.socekts).forEach(function(item){
    ulist.push(item[1]);
})

ulist.length //获取总数

const http  =  require("http");
const server = http.createServer();

const io = require('socket.io')(server);
    // 监听客户端连接状态
	io.on('connection', client => {
    // client 连接入服务的客户端实例

    // event 自定义的事件
    client.on('event', data => {
        console.log(data);
    });


    client.emit("bbb","123");

    // 监听客户端断开服务
    client.on('disconnect', () => { /* … */ });
});
server.listen(3000);

客户端连接

<!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,user-scalable=no">
    <title>Document</title>
		<!-- 引入socket.io文件 -->
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  	<script>
      	//实例化一个socket对象
        const socket = io();

        //当连接建立起来
        socket.on("connect",()=>{
            console.log(11);

            //往服务端发送数据
            socket.emit("event","aaaa")
        })

      	//响应服务的事件
        socket.on("bbb",(data)=>{
            console.log(data);
        })
    </script>
</body>
</html>