devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WebSocket入门篇（一）_websocket学习

作者：Gausst松鼠会 | 2024-03-15 14:45:06

赞

踩

websocket学习

1、什么是WebSocket?

概念

  • WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的网络传输协议。

  • WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

  • 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

特点

  • TCP连接，于HTTP协议兼容

  • 双向通信，主动推送（服务器端向客户端）

  • 无同源限制，协议标识符是ws(加密是wss)

通信方式：

  • 单工通信

  • 半双工通信

  • 全双工通信

对比分析

  • Http:

    • 无法监听连续变化

    • 效率低下

    • 浪费资源

  • Websocket

    • 长连接形式，节省服务器资源和带宽，可以更好的进行实时通信

  • 问题分析

    问：长连接是否消耗服务器资源？

    答：不会，Websocket设计便是为了解决服务器资源的问题，相对于Http只是建立连接，并未在逻辑上进行任何处理或者是查询数据库，所以不会造成系统资源的浪费，同时网络资源上，由于进行通信所以不会占用网络资源，也就是所说的带宽，保持长连接的状态同样不会造成网络资源的浪费，在没有发送消息的时候，整个信道处于空的状态，并不占用带宽。

相关内容

  • Http:超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服

    务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传

    输协议，它可以使浏览器更加高效，使网络传输减少

  • ajax轮询：

    • 方式1：设定一个定时器，无论有无结果返回，时间一到就会继续发起请求，这种轮询耗费资源，也不一定能得到想要的数据，这样的轮询是不推荐的。

    • 方式2：

      轮询就是在第一次请求的时候，如果返回数据了那么就在成功的回调里面再次发起这个请求，就像递归一样，调用本方法。

      如果时间太久，失败了，同样的再次调用这个请求，也就是本函数。当然，长轮询也需要后台配合，没有数据改变的时候就不用返回，或者约定好逻辑。

    • 资料来源

2、使用

ws常用前端库

  • ws(实现原生协议，特点：通用、性能高、定制性强)

  • socket.io(向下兼容，特点：适配性强、性能一般)

学习地址

第一个websocket应用

前置：应用分客户端（client---浏览器端）和服务端（server---node作为服务端）

  • 服务端(node)

    空目录
npm init -y 
npm install ws
    服务端 index.js
const WebSocket = require('ws')
​
const wss = new WebSocket.Server({
  port: 3000
})
​
wss.on('connection', function connection (ws) {
  console.log('一个客户以连接');
})
    客户端 index.html

  • 客户端

       var ws = new WebSocket('ws://localhost:3000')
   ws.onopen = function () {
      console.log(ws.readyState);
      ws.send('client:hello')
    }

  • 注意事项：

    1. 当服务器接收到来自客户端消息的时候，出现编码问题，显示为GBK编码格式，例如：<Buffer 63 6c 69 65 6e 74 20 3a 20 68 65 6c 6c 6f>，这里安装依赖进行解码

      • npm i iconv-lite

      • 解码
console.log(msg);
解码前：<Buffer 63 6c 69 65 6e 74 20 3a 20 68 65 6c 6c 6f>
console.log(iconv.decode(msg, 'gbk'));
解码后：client : hello

      • 更多相关

    3、极简聊天室

    心跳检测

    • 判断客户端和服务端的连接是否牢靠、是否正常，二者可以互相判断，是一个双向的过程，服务端定时的向客户端发送消息，并且客户端及时的做出回应，保证连接正常 ，确保聊天室的在线人数实时封更新

    • 服务端

      1. 给当前用户一个初始化变量，维护当前用户是否登录，判断是否开始心跳检测，同时初始化一个是否处于聊天室的变量-作为在线状态（给定初始值0，登录后改为1，发送心跳检测定义为404，接收到用户的反馈后修改为2，表示当前用户连接状态良好）

      2. 开启定时器，判断用户当前状态为false时主动断开用户连接，更新数据

      3. 接收用户反馈，更新当前用户状态

    • 客户端

      1. 定义初始化函数方便重连

      2. 定义维护需要变量

      3. 定义定时器，用户检测服务端是否再规定时间内发起心跳检测

      4. 捕捉到异常，开启重连

    • 代码

      • 服务端（index.js）

        1. const WebSocket = require('ws');
        2. const iconv = require('iconv-lite'); //解析来自用户的消息
        3. const wss = new WebSocket.Server({
        4.   port: 3000
        5. })
        6. let group = {}
        7. const timeInterval = 1000 //发送心跳请求间隔
        8. wss.on('connection', function (ws) {
        9.   console.log("一个客户已连接");
        10.   ws.isActive = 0 //初始连接状态
        11.   ws.isLogin = false
        12.   ws.on('message', function (msg) {
        13.     const msgObj = JSON.parse(iconv.decode(msg, 'gbk'))
        14.     if (msgObj.event == 'enter') {
        15.       ws.name = msgObj.name
        16.       ws.roomId = msgObj.roomId
        17.       console.log(msgObj);
        18.       if (typeof group[ws.roomId] === 'undefined') {
        19.         group[ws.roomId] = 1
        20.       } else {
        21.         group[ws.roomId]++
        22.       }
        23.       ws.isActive = 1
        24.       ws.isLogin = true
        25.     }
        26.     if (msgObj.event == 'heartbeat' && msgObj.message === 'pong') {
        27.       ws.isActive = 1
        28.       return
        29.     }
        30.     //实现广播
        31.     wss.clients.forEach((client) => {
        32.       if (client.readyState === WebSocket.OPEN && client.roomId === ws.roomId) {
        33.         msgObj.name = ws.name
        34.         msgObj.num = group[ws.roomId]
        35. ​
        36.         client.send(JSON.stringify(msgObj))
        37.       }
        38.     })
        39.   })
        40.   ws.on('close', function () {
        41.     if (ws.name) {
        42.       group[ws.roomId]--
        43.     }
        44.     let msgObj = {}
        45.     wss.clients.forEach((client) => {
        46.       if (client.readyState === WebSocket.OPEN && client.roomId === ws.roomId) {
        47.         msgObj.name = ws.name
        48.         msgObj.num = group[ws.roomId]
        49.         msgObj.event = 'exit'
        50.         client.send(JSON.stringify(msgObj))
        51.       }
        52.     })
        53.   })
        54. })
        55. setInterval(() => {
        56.   wss.clients.forEach((ws) => {
        57.     // 主动发送心跳检测请求
        58.     // 当客户端返回消息之后，主动设置flag为在线
        59.     if (ws.isLogin == true) {
        60.       // console.log(ws.isActive);
        61.       if (ws.isActive == '404') {
        62.         group[ws.roomId]--
        63.         ws.isLogin = false
        64.         return ws.terminate()
        65.       }
        66.       // console.log('---');
        67.       ws.isActive = '404'
        68.       ws.send(JSON.stringify({
        69.         event: 'heartbeat',
        70.         message: 'ping',
        71.         num: group[ws.roomId]
        72.       }))
        73.     }
        74.   })
        75. }, timeInterval)

      • 客户端 （index.html）

        1. <!DOCTYPE html>
        2. <html lang="en">
        3. ​
        4. <head>
        5.   <meta charset="UTF-8">
        6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
        7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
        8.   <title>Document</title>
        9.   <style>
        10.     input {
        11.       outline-style: none;
        12.       border: 1px solid #ccc;
        13.       border-radius: 3px;
        14.       padding: 6px;
        15.       width: 300px;
        16.       font-size: 14px;
        17.       font-family: "Microsoft soft";
        18.     }
        19. ​
        20.     input:focus {
        21.       border-color: #66afe9;
        22.       outline: 0;
        23.       -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        24.       box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        25.     }
        26. ​
        27.     #login {
        28.       display: block;
        29.     }
        30. ​
        31.     #chatRoom {
        32.       display: none
        33.     }
        34.   </style>
        35. </head>
        36. ​
        37. <body>
        38.   <div id='login'>
        39.     <h1>进入聊天室</h1>
        40.     <span>用户名：</span><input type="text" class='msg'>
        41.     <span>房间号：</span><input type="text" class='room'>
        42.     <button class='btn' id="loginBtn">登录</button>
        43.   </div>
        44.   <div id="chatRoom">
        45.     <h1>聊天室</h1>
        46.     <p>在线人数：<span id="nums">0</span></p>
        47.     <input type="text" class='msg'>
        48.     <button class='submitBtn' >发送消息</button>
        49.     <button onclick="clsoeFun()">关闭连接</button>
        50.     <ul id="content">
        51.     </ul>
        52.   </div>
        53.   <script>
        54.     var MyName, MyRoom  //数据存储，重连时使用
        55.     var isLogin = false //判断是否为登录状态
        56.     var isReload = false  //当监听到连接断开时，更新为true连接成功后恢复false
        57.     var content = document.getElementById('content')
        58.     var nums = document.getElementById('nums')
        59.     var handle        //作为定时器监听服务器状态，服务器断开开始尝试重连
        60.     webScoketInit()  //初始化
        61.     function webScoketInit () {
        62.       var ws = new WebSocket('ws://localhost:3000')
        63.       ws.onopen = function () {
        64.         console.log(ws.readyState);
        65.         
        66.         if (isReload) {
        67.           // 如果重新连接服务器，将原本数据重新传入
        68.           let obj = {
        69.             event: 'enter',
        70.             name:MyName,
        71.             roomId:MyRoom,
        72.           }
        73.           ws.send(JSON.stringify(obj))
        74.           isReload = false
        75.         }
        76.       }
        77.       ws.onmessage = (event) => {
        78.         if (!isLogin) return;
        79.         let obj = JSON.parse(event.data)
        80.         showFun(obj)
        81.       }
        82.       ws.onclose = function () {
        83.         console.log("close" + ws.readyState);
        84.       }
        85.       ws.onerror = function () {
        86.         console.log('error' + ws.readyState);
        87.         // 连接失败后一秒进行短线重连
        88.         setTimeout(function () {
        89.           isReload = true
        90.           webScoketInit()
        91.         }, 1000)
        92.       }
        93.       function showFun (obj) {
        94.         let str = ''
        95.         switch (obj.event) {
        96.           case 'enter':
        97.             str = `欢迎${obj.name}进入聊天室`
        98.             nums.innerHTML = obj.num
        99.             break
        100.           case 'exit':
        101.             str = `${obj.name}离开进入聊天室`
        102.             nums.innerHTML = obj.num
        103.             break
        104.           case 'auth':
        105.             return
        106.           case 'heartbeat':
        107.             checkServer()  //timeInterval+ t
        108.             ws.send(JSON.stringify({
        109.               event: 'heartbeat',
        110.               message: 'pong'
        111.             }))
        112.             return
        113.           default:
        114.             str = `${obj.name}:${obj.message}`
        115. ​
        116.         }
        117.         content.innerHTML += `
        118.           <li>${str}</li>
        119.         `
        120.       }
        121.       let submitBtn = document.querySelector(".submitBtn")
        122.       console.log(submitBtn);
        123.       submitBtn.addEventListener("click",submitFun)
        124.       function submitFun () {
        125.         let input = document.getElementsByClassName('msg')[1]
        126.         let value = input.value
        127.         let obj = {
        128.           event: 'message',
        129.           message: value
        130.         }
        131.         ws.send(JSON.stringify(obj))
        132.         value.value = ''
        133.       }
        134.       let loginBtn = document.getElementById('loginBtn')
        135.       loginBtn.addEventListener('click', login)
        136.       function login () {
        137.         let inputName = document.getElementsByClassName('msg')[0]
        138.         let inputRoomId = document.getElementsByClassName('room')[0]
        139.         let roomId = inputRoomId.value
        140.         let name = inputName.value
        141.         MyName = name
        142.         MyRoom = roomId
        143.         if (name.trim() == '') {
        144.           alert('请输入名称')
        145.         } else {
        146.           let obj = {
        147.             event: 'enter',
        148.             name,
        149.             roomId
        150.           }
        151.           ws.send(JSON.stringify(obj))
        152.           inputName.value = ''
        153.           inputRoomId.value = ''
        154.           document.getElementById('login').style.display = 'none'
        155.           document.getElementById('chatRoom').style.display = 'block'
        156.           isLogin = true
        157.         }
        158.       }
        159.       function clsoeFun () {
        160.         ws.close()
        161.       }
        162.       /*
        163.       接收到服务器发送的心跳检测，
        164.       回复的同时开始开启检测（考虑延时t）如果服务端未再规定时间内再次发送请求，
        165.       理解为服务端异常，触发重连
        166.       */
        167.       function checkServer () {
        168.         clearTimeout(handle)
        169.         handle = setTimeout(function () {
        170.           isReload = true
        171.           webScoketInit()
        172.         }, 1000 + 500)
        173.       }
        174.     }
        175.   </script>
        176. </body>
        177. ​
        178. </html>

    4、socket.io

    socket.io官网

    W3Cschool

    特点：

    • 易用性：socket.io封装了服务端和客户端，使用起来非常简单方便。

      • 内置心跳检测：短线重连

      • 广播自动过滤当前发消息用户

    • 跨平台：socket.io支持跨平台，这就意味着你有了更多的选择，可以在自己喜欢的平台下开发实时应用。

    • 自适应：它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5。

    初步使用

    • 服务端

      空目录
npm init -y
npm i socket-io
npm i express
      1. //server.js
      2. const app = require('express')();
      3. const http = require('http').createServer(app);
      4. const io = require('socket.io')(http)
      5. ​
      6. app.get('/', function (req, res) {
      7.   res.sendFile(__dirname + '/index.html') //创建默认打开文件
      8. })
      9. ​
      10. io.on('connection', function (socket) {
      11.   console.log('a socket is connected');
      12.   socket.on('chatEvent', function (msg) {  //监听客户端注册的charEvent事件，接收发送过来的消息
      13.     console.log(msg);
      14.     // socket.send('server 收到')
      15.     //广播，向聊天室其他成员发送消息，本人并不会接收，同时也无需接收
      16.     socket.broadcast.emit('SreverMsg', msg)  //服务器注册ServerMsg事件，向所有用户广播，广播消息，实现群聊功能，自动过滤当前用户
      17.     //单独向当前用户发送消息
      18.     socket.send(msg)
      19.   })
      20. })
      21. http.listen(3000, function () {
      22.   console.log("3000端口已开启");
      23. })

    • 客户端

      1. //index.html
      2. <!DOCTYPE html>
      3. <html lang="en">
      4. ​
      5. <head>
      6.   <meta charset="UTF-8">
      7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
      8.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
      9.   <title>Document</title>
      10.   <style>
      11.     input {
      12.       outline-style: none;
      13.       border: 1px solid #ccc;
      14.       border-radius: 3px;
      15.       padding: 6px;
      16.       width: 300px;
      17.       font-size: 14px;
      18.       font-family: "Microsoft soft";
      19.     }
      20. ​
      21.     input:focus {
      22.       border-color: #66afe9;
      23.       outline: 0;
      24.       -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
      25.       box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
      26.     }
      27.   </style>
      28. </head>
      29. <input type="text" id='msg'>
      30. <button id='btn'>发送消息</button>
      31. <body>
      32.   <!-- <script src="/socket.io/socket.io.js"></script> -->
      33.   <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.2/socket.io.js"></script>
      34.   <script>
      35.     var socket = io()  //初始化
      36.     document.getElementById('btn').addEventListener('click', function (e) {
      37.       var value = document.getElementById('msg').value
      38.       socket.emit('chatEvent', value)   //注册发送消息事件，向服务器发送消息
      39.       document.getElementById('msg').value = ''
      40.     })
      41.     //监听服务器单独发送的消息    
      42.     socket.on('message', function (msg) {
      43.       console.log(msg);
      44.     })
      45.     //监听服务器注册的广播事件，接收消息
      46.     socket.on('SreverMsg', function (msg) {
      47.       console.log(msg);
      48.     })
      49.   </script>
      50. </body>
      51. </html>

    • socket.js引入方式

      • <script src="/socket.io/socket.io.js"></script>

      • <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.2/socket.io.js"></script>

      • 方式二地址

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/241893
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号