WebSocket学习笔记（一）

1. 概述

• 本质：HTML5新增协议
• 目的：在浏览器和服务器间，建立一个不受限的双向通信通道
• 传统HTTP协议：请求 - 响应协议（服务器无法主动发送消息）
• 应用：实时聊天，多人游戏（数据实时同步）
• HTTP轮询（Comet）问题：实时性不够，请求频繁

2. WebSocket 协议

• 浏览器请求

GET ws://localhost:3000/ HTTP/1.1		//协议、域名（主机）、端口、路径   HTTP版本
Host: localhost:3000
Connection: Upgrade								//协议转换
Upgrade: websocket								//转换成websocket协议
Origin: file://									//请求源（协议、域名、端口），
Sec-WebSocket-Version: 13						//版本号
Sec-WebSocket-Key: 1xg0aLGkXudIZLHYyFewUw==		//连接标识

• 服务器返回

HTTP/1.1 101 Switching Protocols	//101更改协议
Upgrade: websocket					//更改后的协议
Connection: Upgrade

• 要点
  • 非全新协议
  • 创建连接：由浏览器发起的HTTP请求
  • 消息类型：文本，二进制数据
  • HTTP建立在TCP上，TCP是全双工通信（HTTP请求-应答机制限制，WS不限制）
  • https -> wss：通过https先创建安全连接，然后升级为ws

3. 使用

• 服务端支持：nodejs的ws模块
• WebSocket服务端实例
  • 接收请求
  • 发送消息
• WebSocket客户端实例
  • 创建连接
  • 发送请求
  • 接收消息
• 双端：ws 模块包含双端（客户端、服务端）
• 同源策略： ws 协议本身不需要同源策略（Same-origin Policy），服务端可做检查（Origin）
• 路径：服务端connection时，未检查路径，可自实现

//运行：node app.js
//app.js
const WebSocket = require('ws') //websocket
const {
      Server } = WebSocket

//客户端
const ws = new WebSocket('ws://localhost:3000')
//发送消息(打开websocket后)
ws.on('open', () => {
     
    ws.send('hello')
})
//接受消息
ws.on('message', msg => console.log(msg))



//服务端
const wss = new Server({
     
    port: 3000
})
wss.on('connection', ws => {
     
    ws.on('message', msg => {
     
        console.log(msg)
        ws.send(`echo ${
       msg}`)      //双向通信
    })
})

参考链接

• https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096