持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

WebSocket和HTTP协议有什么区别?

WebSocket

支持端对端通讯
可以由 client 发起，也可以由 server 发起
用于：消息通知，直播讨论区，聊天室，协同编辑

简单的代码演示：

前端页面

<!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">
    <title>websocket</title>
</head>
<body>
    <p>websocket</p>
    <button id="btn-send">发送消息</button>

    <script>
        const ws = new WebSocket('ws://127.0.0.1:3000')
        ws.onopen = () => {
            console.info('opened')
            ws.send('client opened')
        }
        ws.onmessage = event => {
            console.info('收到了信息', event.data)
        }

        const btnSend = document.getElementById('btn-send')
        btnSend.addEventListener('click', () => {
            console.info('clicked')
            ws.send('当前时间' + Date.now())
        })
    </script>
</body>
</html>

node.js 应用：

前提 安装 nodejs v14+ ，安装 npm 或 yarn

npm init -y

安装如下依赖：

npm install ws --save
npm install nodemon -save--dev

在 package.json 中添加：

"dev": "nodemon src/index.js"

然后编辑我们简单的demo：

const { WebSocketServer } = require('ws')

const wsServer = new WebSocketServer({ port: 3000 })

wsServer.on('connection', ws => {
    console.info('connected')

    ws.on('message', msg => {
        console.info('收到了信息！', msg.toString())
        setTimeout(() => {
            ws.send('服务端收到了信息：' + msg.toString())
        }, 2000)
    })
})

然后我们进行测试吧！

测试

好了，我们代码演示完了，对WebSocket我们也有了一点点点的使用经验，我们看一下WebSocket的连接过程。

WebSocket的连接过程

先发起一个 HTTP 请求
成功之后在升级到 WebSocket 协议，再通讯

我们可以在我们刚刚的demo的控制台的网络请求中看到

链接的过程中：
- Status Code: 101 Switching Protocols 切换协议
不论是在 Response Headers 还是在 Request Headers 中都有：
- Connection：Upgrade 来指示这是一个升级请求
- Upgrade: websocket

总结：WebSocket和HTTP协议的区别

协议名称不同 ws 和 http
http 一般只能浏览器发起请求，webSocket 可以双端发起请求
WebSocket没有跨域限制
通过 send 和 onmessage 通讯(http 通过 req 和 res)

PS：ws 可以升级为 wss 协议，像 http 升级到 https 一样，增加 SSL 安全协议。

扩展

如果做项目开发，推荐使用 socket.io，API 更方便。

webSocket 和长轮询（长连接）的区别

http 长轮询 - 客户端发起 http 请求，server 不立即返回，等待有结果再返回。这期间 TCP 连接不会关闭，阻塞式。（需要处理 timeout 的情况）
webSocket - 客户端发起请求，服务端接收，连接关闭。服务端发起请求，客户端接收，连接关闭。非阻塞。