• Http和websocket(用Nodejs简单实现websocket通信)

    文章目录

    WebSocket发展的起源

    通信效率低 : http是客户端-服务端通信的协议，在这种模式中，一般是由客户端向服务端发起请求，服务端向客户端返回数据(半双工)，而无法做到在同一时刻，服务端和客户端同时通信(全双工)
    数据冗余: http是无状态的，即每次请求都是独立且唯一的，则每次客户端都要向服务端发送token或者cookie来进行信息的验证，即每次请求的数据都冗余。
    通信只能由客户端发起: 由于半双工的通信方式，服务端无法主动向客户端发送数据。这种半双工的方式，不适用于实时通信，例如网页的聊天，直播等等。

    Websocket简介

    websocket协议能够通过web进行服务端和客户端进行全双工通信，支持二进制和文本传输。这个协议的初次握手是通过Http进行，websocket链接一旦建立，即可进行双向的数据通信。特点如下：

    • 建立在TCP协议之上，服务端的实现比较容易
    • 与HTTP协议有很好的兼容性，并且握手阶段采用http协议，因此握手时候不容易被屏蔽
    • 没有同源策略
    • 可以发送文本，也可以发送二进制数据
    • 数据格式比较轻量，性能开销小，通信高效

    Websocket服务端与客户端的实现

    客户端代码

    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>Documenttitle>
head>
<body>
  <input id='text' type="text" placeholder='请输入要发送的消息'>
    <button onclick="info()" id='msg'>点击发送消息button>
    <script>
      
      let websocket = new WebSocket('ws://127.0.0.1:8080')
      websocket.onopen = function () {
        /* 
          0-链接未建立
          1-链接建立成功
          2-链接正在关闭
          3-链接已经关闭
        */
        // console.log(websocket.readyState); 

      }
      function info(){
        let msg = document.getElementById("text").value
        websocket.send(msg)
      }

      // 客户端接收到的从服务器返回的消息
      websocket.onmessage = function (back) {
        console.log('从服务端返回的数据', back.data);
      }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    服务端代码

    // npm install websocket    https://github.com/theturtle32/WebSocket-Node
// node serve.js 运行

const WebSocketServer = require('websocket').server;
const http = require('http');

let server = http.createServer().listen(8080, function() {
  console.log('http://127.0.0.1:8080');
});

// websocket握手是通过http建立的，所以是需要Http对象
wsServer = new WebSocketServer({
  httpServer: server,
  autoAcceptConnections: false
});

let connectionList = []
wsServer.on('request', (req)=>{
  let connection = req.accept();
  // 把每一个建立的链接状态保存起来，到时候服务器可以把从一个客户端得到的内容发送个多个客户端
  // 可以通过打开多个浏览器页面进行模拟
  connectionList.push(connection); 
  connection.on('message', (msg)=>{
    console.log(msg); // 服务端接收到的客户端发送的数据
    connectionList.forEach((item)=>{
      item.send(msg.utf8Data)
    })
  })
  
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    请求头分析

    在这里插入图片描述

    参考资料

  • 相关阅读:
    套接字Socket编程实践（C语言版）
    AAOS音频路由 问题分析
    谈笑风声的秘密
    【云原生】Docker 进阶 -- 阿里云服务器安装Docker Compose与初体验
    SpringBoot前端后端分离之Nginx服务器
    【ROS】Nav2源码之nav2_planner详解
    网上选课系统的设计与实现（ASP.NET）
    算法--选择排序
    走进Web3万链互联：跨链&跨层、锁定+铸造与哈希时间锁定
    学习node.js & WS&服务器设置SFTP
  • 原文地址：https://blog.csdn.net/mianmami/article/details/125902622