快速理解websocket的原理与使用（精简无封装）

一、websocket是什么？

概念：websocket是HTML5新增的协议（也是基于http建立连接），目的是再浏览器（客户端）和服务器之间建立一个不受限的双向通信的通道。
传统的http协议是一个请求-响应协议，必须先由浏览器发送给服务器，服务器才能响应，以前是采用轮询来实现实时互通，其缺点很明显：实时性不够，服务器压力大。
四个事件：
1.open 连接建立时触发
2.message 客户端接受服务端数据时触发
3.error 通信发生错误时触发
4.close 连接关闭时触发
两个方法：
1.send 发送消息
2.close 关闭连接

二、websocket的使用

1.前端浏览器

代码如下（示例）：
1.客户端首先连接服务器地址
2.利用onmessage方法接受服务器过来的消息，利用WebSocket的send方法给服务器发送消息

//实例化WebSocket函数，连接地址（在这一步一般会进行配置封装）
let ws = new WebSocket('ws://localhost:8000')
//连接成功后
ws.onopen=function(evt){
    
    
  console.log('连接成功，我是客户端')
}
//传递和接受服务器数据的方法(必须连接成功后)
ws.onmessage=function(evt){
    
    
     //接受来自服务端的消息
     console.log('服务端发送过来的消息在这：'+evt)
     //也可以发送消息给服务端
     ws.send('我是客户端传送过来的第二条消息')
     //每发完一次消息，关闭连接，避免一直发送
     ws.close()
}

注意：onmessage事件回调函数中的evt参数中携带服务器发送过来的消息（数据），直接解析evt即可。

2.后端服务器

1.先引入ws（websocket）的模块
2.实例化websocket，引入port端口号
3.监听连接，监听客户端传递的消息或者监听的同时发送消息

const Websocket = require('ws')
//一般再这一步会进行配置封装，便于维护
const wss=new Websocket.Server({
    
    port:8000})
//服务器监听连接回调函数
wss.on('connection',function(ws){
    
    
   //监听消息回调函数
   ws.on('message',function(message){
    
    
       //接受来自客户端的消息
       console.log('客户端发送过来的消息在这：'+message)
       //也可以发送消息给客户端
       ws.send('我是服务器发送来的消息')
 })
])

注意：在message回调函数里（参数）可以接受到客户端发来的消息，也可以发送消息给客户端。