Websocket的介绍以及基本使用

1.为什么要选择Websocket而不选择Http?

首先明确一点，Websocket和Http都属于应用层协议。
其次，一个客户端要将信息发送给另外一个客户端是需要经过服务器的，由服务器代为转发。
而Http是基于 请求------->响应模型的，即服务器不会主动给客户端发送，只是相应它的请求。

Websocket协议是基于TCP协议的一种新的网络协议，它实现了浏览器与服务器全双工（full-duplex）通信，即允许服务器主动发送信息给客户端
Websocket是一种持久协议，Http是非持久协议

现在很多网站都有实时推送的需求，比如聊天，客服咨询等

早期没有websocket时，通过ajax轮询，由于http请求，服务器无法给浏览器主动发送数据，因此需要浏览器定时的给服务器答复请求（例如1s一次），服务器把最新的数据响应给浏览器，这种模式的缺点就是浪费性能和资源。（每次响应请求都需要三次握手）

（图片来源菜鸟教程）

2.在H5中，Websocket的基本使用

1）Websocket在浏览器端的使用，H5种直接提供了Websocket的API，故可以直接使用
Websocket使用教程地址

// 1.创建Websocket的连接（参数为WebSocket的服务地址）
var socket = new WebSocket('ws://echo.websocket.org')  //此处的地址为官方提供的地址,你发啥它回啥

//2.open，当和websocket服务连接成功的时候触发
socket.addEventListener('open', function(){

                div.innerHTML = '连接服务成功了'
            })

//3.主动给websocket服务发送消息
button.addEventListener('click', function(){
                var value = input.value
                socket.send(value)

            })
/*
WebSocket的方法
Socket.send()    //使用连接发送数据
Socket.close()   //关闭连接
*/

//4.接受websocket的消息
socket.addEventListener('message', function(e){
                console.log(e.data)
                div.innerHTML = e.data
            })
            
//5.websocket断开的时候
socket.addEventListener('close', function(){
                div.innerHTML = '服务器断开'
            })

3.Websocket和Socket啥关系？

1）Socket是套接字，Socket是在应用层和传输层之间的一个抽象层，是一组接口，它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用以实现进程在网络中通信。

总而言之，Http和Socket啥关系，Websocket就和Socket啥关系。Websocket和Socket，就像Java和JavaScript一样，没有太大的关系。