• webSocket-01

    MDN地址：详细请移步WebSocket - Web API 接口参考 | MDN

    websocket是一种通信协议。

    定义： 客户端和服务器双向通信，双方同时可以进行通信和数据交换

    优点：可以实现真正的并发和性能优化，从而产生响应更快，更丰富的web应用程序

    Web Socket URL：

      前端如何使用websocket：

            HTML5开始前端页面可以使用WebSocket('ws://localhost:3000')构造函数来生成也可websocket对象。其中ws://localhost:3000是webSocket服务器连接。

    const ws = new WebSocket('ws://localhost:3000')

    几个重要的Events：

    open: 当客户端和服务器端建立了连接之后会调用该方法。

    1. ws.addEventListener('open',(event)=>{
    2.    con.innerHTML = '服务器已连接'
    3. })

    message:当服务器端给客户端发送了数据就会触发这个方法

    1. ws.addEventListener('message',(e)=>{
    2.    con.innerHTML = e.data
    3. })

    close:当服务器和客户端断开连接之后触发该事件

    error：当连接由一些错误事件而关闭时调用。

    两个重要的方法：

    close(): ws.close() 用于关闭连接

    send():ws.send(data)用于发送数据

    下面是一个尝试的客户端（前端）websoclet代码，这里的代码会和后面服务端websocket代码形成一整体：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>简单的websocket通信案例</title>
    8.   <style>
    9.     .content{
    10.       margin-top:2px;
    11.       width: 200px;
    12.       height: 200px;
    13.       border:1px solid #888;
    14.     }
    15.   </style>
    16. </head>
    17. <body>
    18.     <div>
    19.       <input type="text" placeholder="请输入" class="inp">
    20.       <button class="btn">发送</button>
    21.       <div class="content"></div>
    22.     </div>
    23.     <script>
    24.         // 引入websocket
    25.         const ws = new WebSocket('ws://localhost:3000')
    26.         let input = document.querySelector('.inp')
    27.         let btn = document.querySelector('.btn')
    28.         let con = document.querySelector('.content')
    29.         
    30.         ws.addEventListener('open',(event)=>{
    31.           con.innerHTML = '服务器已连接'
    32.         })
    33.         // 客户端点击发送数据到服务器
    34.         btn.addEventListener('click',(e)=>{
    35.           let value = input.value
    36.           ws.send(value)
    37.         })
    38.         ws.addEventListener('message',(e)=>{
    39.           con.innerHTML = e.data
    40.         })
    41.     </script>
    42. </body>
    43. </html>

    后端的websocket代码：这里使用nodejs搭建websocket服务器。

    首先需要安装nodejs-websocket 

    npm install nodejs-websocket

    详细代码见下方：

    1. const ws = require('nodejs-websocket')
    2. const PORT = 3000
    3. // 只要有用户登录就调用一次函数，并请生成一个conn对象
    4. const server = ws.createServer(conn =>{
    5.   // text 检测客户端传过来的数据
    6.   conn.on('text',(data)=>{
    7.     console.log(data)
    8.     conn.send('服务器端来的:'+data.toUpperCase())
    9.   })
    10.   conn.on('error',(data)=>{
    11.     console.log('错误')
    12.   })
    13. })
    14. server.listen(PORT,()=>{
    15.   console.log('服务器已启动')
    16. })

  • 相关阅读:
    浅谈浮动flex
    自动化测试的十大优势
    零基础学习CANoe Panel（1）—— 新建 Panel
    显示订单列表【项目 商城】
    创建WPF项目
    golang操作Kafka
    Apache Kyuubi & Celeborn，助力 Spark 拥抱云原生
    记录因Sharding Jdbc批量操作引发的一次fullGC
    数据库设计
    【CAN信号解析】使用python-can/cantools解析CAN数据
  • 原文地址：https://blog.csdn.net/LH2HA3/article/details/125545120