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

棉马咪

已于 2022-07-20 23:57:46 修改

阅读量735

点赞数 2

分类专栏： web前端文章标签： websocket http javascript 网络 js

于 2022-07-20 23:57:03 首次发布

本文链接：https://blog.csdn.net/mianmami/article/details/125902622

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

WebSocket发展的起源
Websocket简介
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>Document</title>
</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>

服务端代码

// 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)
    })
  })
  
})