40

需要使用到的框架有：

    【提供和系统打交道的所有方法】
1    桌面端：electron————————集成了谷歌浏览器和node.js的一个桌面运行环境 

  2013 年的时候，Atom 编辑器问世，作为实现它的底层框架 Electron 也逐渐被熟知
  Electron 是 GitHub 开发的一个开源框架。它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。
  可以用于构建具有 html、css、JAVAScript 的跨平台桌面应用程序，它通过将 Chromium 和 node.js 合同一个运行的环境中来实现这一点，应用程序可以打包到 mac、windows 和 linux 系统上。


————————进程通讯——————

 主进程     main.js


 渲染进程    mainWindow.loadFile('index.html')包含的所有 html 和 js 。

ipcrender渲染进程
ipcmain渲染主进程
     resizable: false框架大小不可调


例："start": "electron ."  使用electron去运行"main": "main.js"这个文件、
空格. .就代表着"main": "main.js"这个文件，但一定要写main，因为main代表的是程序的主入口文件

electron-builder项目打包
"build": {

    应用的唯一编号  倒序
    "appId": "com.abandon.qq",

    产品名称
    "productName": "Abandon",

    源码是否加密
    "asar": false,

    作者
    "copyright": "Copyright © 2022 abandon",
    "extends": null,

    打包哪些文件
    "files": [
      "./*"
    ],
    输出到哪个文件夹
    "directories": {
      "output": "./build"
    },
    windows系统打包
    "win": {
        图标 需要png转ico
      "icon": "./logo.ico",
      "target": [
        "msi"
      ]
    }
  }


    【实现功能交互】
2    js框架：jquery————————对原生js的封装




3    ui框架：zui


    【双向通讯】
4    通讯技术：websocket 


   WebSocket是一种在单个TCP连接上进行全双工通信的协议。
   它使得客户端和服务器之间的数据交换变得更加简单，允许 ！！  服务端  主动向 客户端 ！！推送数据。
   在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建 ！！持久性的连接 ！！，并进行双向数据传输。
   握手：需要通过浏览器发出请求，之后服务器进行回应，这个过程通常称为“握手”



  5  websocket的框架：socket.io
     
     心跳，断线重连

  【提供插件实现各种功能】    
  6  node.js的web开发框架：express

【页面布局】        
html css js（jquery）    前端 fontend
                         后端 backend



————————通讯技术：websocket————————
 
 例： ——index.js——
        const { WebSocketServer } = require("ws");

        //创建websocket连接（创建服务端，端口：8080）
        const wss = new WebSocketServer({ port: 8080 });

        //连接成功触发
        //on'connection'监听是否连接成功
        wss.on('connection', function connection(ws) {
            console.log("一个客户端连接到服务器了..");  
 
            //监听消息是否接收
            ws.on('message', function message(data) {
                console.log('服务器接收到的消息：', data.toString());
                ws.send('服务器给前端的消息');
            });  
        });

      ——index.html——
    <body>
        <textarea name="" placeholder="输入内容" id="" cols="30" rows="10"></textarea>
        <button>发送</button>
    </body>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var ws = new WebSocket("ws://127.0.0.1:8080")

        //以下三个均可省略不写，只需要一定要onmessage
        // ws.onopen = function () {
        //     console.log("连接已经打开");
        // }

        // ws.onerror = function () {
        //     console.log("连接产生错误");
        // }

        // ws.onclose = function () {
        //     console.log("连接关闭");
        // }

        ws.onmessage = function (e) {
            console.log("收到后端给的消息",e.data);
        }

        $("button").click(function (){
            ws.send($("textarea").val())
            console.log($("textarea").val());
        })
    </script>




项目实例： 登陆页面：头像  房间名 用户名 登录按钮
           
           
           聊天页面：
                    头部  头像 群名称
                    
                    内容    左：聊天记录
                            右：标题 在线人数（头像 用户名） 在线成员
                    
                    底部  工具栏： 表情 文件传输等等
                          输入框： 


页面跳转实现逻辑：