WebSocket快速入门及基本使用

近期工作中经常使用到WebSocket协议，所以和大家分享一下WebSocket的相关内容，也借此机会整理一下自己的思绪。

HTTP协议（半双工通信）

介绍 WebSocket 前我们先看看常用的HTTP协议，HTTP是客户端/服务器模式中请求-响应所用的协议，这种模式是半双工通信，浏览器向服务器提交HTTP请求，服务器响应请求的资源。简单说就是浏览器请求，服务器才响应。所以半双工通信的特点就是：

同一时刻数据流是单向的，客户端向服务端请求数据->单向，服务端向客户端返回数据->单向
服务器无法主动推送数据给客户端

这种半双工通信你觉得是否存在局限呢，肯定是有的，因为同一时刻数据是单向的，有时候项目需求是希望服务器能够主动给客户端发送数据，为解决这一问题，在HTML5中又引入了一个双方能够同时通信的API，那就是WebSocket！

WebSocket协议（全双工通信）

WebSocket是 HTML5 开始提供的一种浏览器与服务器进行全双工通讯的协议，属于应用层。它基于TCP传输协议，并复用HTTP的握手通道。

也就是说，建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息 "Upgrade: WebSocket" 表明这是一个申请将协议升级为WebSocket的 HTTP 请求（具体见图1），服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，此时支持双向数据传输，这是一个长连接，会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

（图1，项目真实抓包）

方法及事件介绍

假设我们创建了一个 ws 对象：

var ws = new WebSocket(url, [protocol] );

参数说明：
url：指定连接的 URL；
protocol：可选，指定可接受的子协议。

ws 对象上的事件：

事件	说明
open	连接建立时触发
message	客户端接收到服务端消息时触发
error	通信出现错误时触发
close	连接关闭时触发

另外，我们可以通过 ws.send() 方法，给服务端发送数据；也可以通过 ws.close() 方法主动断开连接。

用例代码

服务端代码

1. 初始化一个node项目

npm init -y

2. 新建一个入口文件 app.js，这里基于koa框架，需要先npm install koa，其他依赖根据提示缺少什么就安装什么，这里不拓展啦。

//app.js
// 使用koa
const koa = require('koa')
const router = require('koa-router')()
// koa-websocket是koa封装好的websocket功能
const websocket = require('koa-websocket')
// 实例化一个ws服务
const app = websocket(new koa())

// 监听koa/ws路由，是否有连接
router.all('/koa/ws', (ctx) => {
    // 监听客户端发送过来的信息
    ctx.websocket.on('message', function(message) {
        console.log('收到了客户端发过来的消息:' + message);
        // 向客户端发送消息
        ctx.websocket.send('我是服务端')
        console.log('已向客户端发送数据')
        
    });
})
// 使用路由
app.ws.use(router.routes()).use(router.allowedMethods())

//端口号后面可采用动态的
app.listen(3000, () =>
    console.log('服务启动成功')
)

3. 输入命令启动服务

node app.js

客户端代码

1. 新建一个test.html文件

// test.html
<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
   <title>client</title>
    
    <script type="text/javascript">
        function WebSocketTest() {
            if ("WebSocket" in window){  //判断当前浏览器是否支持websocket
                alert("您的浏览器支持 WebSocket!");
                
                // 打开一个 web socket
                let ws = new WebSocket('ws://localhost:3000/koa/ws');
                // onopen是客户端与服务端建立连接后触发
                ws.onopen = function(){
                    // 使用 send() 方法发送数据
                    ws.send("我是客户端");
                    console.log('已向服务端发送数据')
                };
                //监听服务端发过来的信息
                ws.onmessage = function (msg) { 
                    var received_msg = msg.data;
                    console.log('收到了服务端发过来的信息：'+received_msg)
                };
                ws.onclose = function(){ 
                    // 关闭 websocket
                    alert("连接已关闭..."); 
                };
            }else{
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        }
    </script>
   </head>
   <body>
   
      <div>
         <button onclick="WebSocketTest()">开启websocket连接</button>
      </div>
      
   </body>
</html>

2. 浏览器打开 test.html 文件

以上客户端/服务端代码执行效果概括为：点击 “开启websocket连接” 按钮，会触发WebSocketTest方法，即会建立一个websocket连接。

此时客户端的打印是：

服务端的打印是：

由此可见，一个websocket连接已成功建立，双方可以通过send方法自由给对方发送数据。

最后

WebSocket建立的是长连接，且允许服务端主动向客户端推送数据，使得客户端和服务器之间的数据交换变得更加简单。