• 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，其他依赖根据提示缺少什么就安装什么，这里不拓展啦。

    1. //app.js
    2. // 使用koa
    3. const koa = require('koa')
    4. const router = require('koa-router')()
    5. // koa-websocket是koa封装好的websocket功能
    6. const websocket = require('koa-websocket')
    7. // 实例化一个ws服务
    8. const app = websocket(new koa())
    9.  
    10. // 监听koa/ws路由，是否有连接
    11. router.all('/koa/ws', (ctx) => {
    12.     // 监听客户端发送过来的信息
    13.     ctx.websocket.on('message', function(message) {
    14.         console.log('收到了客户端发过来的消息:' + message);
    15.         // 向客户端发送消息
    16.         ctx.websocket.send('我是服务端')
    17.         console.log('已向客户端发送数据')
    18.         
    19.     });
    20. })
    21. // 使用路由
    22. app.ws.use(router.routes()).use(router.allowedMethods())
    23.  
    24. //端口号后面可采用动态的
    25. app.listen(3000, () =>
    26.     console.log('服务启动成功')
    27. )

    3. 输入命令启动服务

    node app.js

    客户端代码

    1. 新建一个test.html文件

    1. // test.html
    2. DOCTYPE html>
    3. <html>
    4.    <head>
    5.    <meta charset="utf-8">
    6.    <title>clienttitle>
    7.     
    8.     <script type="text/javascript">
    9.         function WebSocketTest() {
    10.             if ("WebSocket" in window){  //判断当前浏览器是否支持websocket
    11.                 alert("您的浏览器支持 WebSocket!");
    12.                 
    13.                 // 打开一个 web socket
    14.                 let ws = new WebSocket('ws://localhost:3000/koa/ws');
    15.                 // onopen是客户端与服务端建立连接后触发
    16.                 ws.onopen = function(){
    17.                     // 使用 send() 方法发送数据
    18.                     ws.send("我是客户端");
    19.                     console.log('已向服务端发送数据')
    20.                 };
    21.                 //监听服务端发过来的信息
    22.                 ws.onmessage = function (msg) { 
    23.                     var received_msg = msg.data;
    24.                     console.log('收到了服务端发过来的信息：'+received_msg)
    25.                 };
    26.                 ws.onclose = function(){ 
    27.                     // 关闭 websocket
    28.                     alert("连接已关闭..."); 
    29.                 };
    30.             }else{
    31.                 // 浏览器不支持 WebSocket
    32.                 alert("您的浏览器不支持 WebSocket!");
    33.             }
    34.         }
    35.     script>
    36.    head>
    37.    <body>
    38.    
    39.       <div>
    40.          <button onclick="WebSocketTest()">开启websocket连接button>
    41.       div>
    42.       
    43.    body>
    44. html>

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

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

    此时客户端的打印是：

    服务端的打印是：

     

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

    最后

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

  • 相关阅读:
    Spring + vue 项目部署(全网最详细教程_含内网穿透部署)
    细说卷积神经网络（CNN）中所谓的“感受野”（Receptive Field）
    孩子的编程启蒙好伙伴，自己动手打造小世界，长毛象教育AI百变编程积木套件上手
    GraphSAGE-Inductive Representation Learning on Large Graphs
    深入探索：Facebook如何重塑社交互动
    面渣逆袭：Java基础五十三问，快来看看有没有你不会的
    QT 插件化图像算法软件架构
    Sql优化(详解一条龙服务)
    Android平台GB28181执法记录仪技术方案
    新需求：实现一个自动运维部署工具
  • 原文地址：https://blog.csdn.net/weixin_44427784/article/details/126579625