first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/聊天室/笔记.txt

@@ -0,0 +1,168 @@
+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>
+
+
+
+
+项目实例： 登陆页面：头像  房间名 用户名 登录按钮
+           
+           
+           聊天页面：
+                    头部  头像 群名称
+                    
+                    内容    左：聊天记录
+                            右：标题 在线人数（头像 用户名） 在线成员
+                    
+                    底部  工具栏： 表情 文件传输等等
+                          输入框： 
+
+
+页面跳转实现逻辑：
+
+
+