• WebSocket的优缺点

    WebSocket的优缺点

    1. WebSocket概念

    1.1 WebSocket优点

    1. 低延迟
    2. 全双工
    3. 长期运行
    4. 双向实时通信

    1.2 什么是心跳机制

    为了保持WebSocket稳定的长连接,在建立连接后,服务器和客户端之间需要通过心跳包来保持连接状态,以防止连接因长时间没有数据传输而被切断.
    心跳包是一直特殊的数据包,它不包含任何实际数据,仅用来维持连接状态.

    1.3 WebSocket的限制

    1. 不提供加密功能.可以使用ssl或者设置白名单
    2. 不支持老版本的浏览器
    3. 需要对长连接进行维护

    2. WebSocket简单代码实现

    2.1 服务端

    1. 引入http和websocket模块
    2. 创建http服务器实例
    3. 通过http创建websocket服务器
    4. 当客户端连接到websocket时,触发connection事件
      1. 接收到客户端消息触发message事件,来处理收到的消息,并通过socket.send方法向客户端发送消息.
      2. 当客户端断开连接时,触发close事件.
    const http = require('http');
const WebSocket = require('ws');

const server = http.createServer();
const wss = new WebSocket.Server({ server });
wss.on('connection', (socket)=>{
    console.log('ws连接已经打开!');
    socket.on('message',(message)=>{
        console.log('收到消息'+message);
        socket.send('Hola');
    });
    socket.on('close',()=> {
        console.log('ws连接已关闭');
    });
});

server.on('request',(request,response)=>{
    response.writeHead(200, {'Content-Type':'text/plain'});
    response.end('Hola');
});

server.listen(8800,()=>{
    console.log('服务器已启动,服务端口为8800');
});

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

    2.2 客户端

    1. 创建websocket实例,给它指定服务器地址
    2. 监听websocket事件
      1. 连接打开
      2. 收到消息
      3. 连接关闭
    3. 通过按钮事件发送消息到服务器
    DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test-demotitle>
    head>
    <body>
      <button onclick="sendMsg()">发送消息button>
    body>
    <script>
      const socket=new WebSocket("ws://localhost:8800")
      socket.onopen=function(event) {
        console.log("连接建立")
      };
      socket.onmessage=function(event){
        console.log("收到消息:"+event.data)
      };
      socket.onclose=function(event){
        console.log("连接已关闭")
      };
      function sendMsg(){
        socket.send("hello!")
      };
    script>
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

    2.3 访问测试

    在请求头中带上了Upgrade,服务器也响应成功

    请添加图片描述

    当客户端点击"发消息"后,在消息中可以看到客户端发送了Hello.服务器回复了Hola

    请添加图片描述

    在console中也能看到服务器返回内容

    请添加图片描述

  • 相关阅读:
    基于 mlr 包的逻辑回归算法介绍与实践
    MySQL索引的原理和最佳使用
    【加密算法】RSA算法与代码实现
    【笔记】大话设计模式16
    在屏幕上打印杨辉三角
    visual studio python输出中文乱码问题
    开发语言漫谈-erlang
    工件SSMwar exploded 部署工件时出错。请参阅服务器日志了解详细信息
    Java预习46
    iOS设备管理器iMazing比iTunes好用吗？有哪些优势
  • 原文地址：https://blog.csdn.net/qq_29974229/article/details/132835077