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

请求头分析

在这里插入图片描述

参考资料

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值