WebSockets 是 Web 應用程式中 HTTP 通訊的替代方案。它們提供了一個長期存在的、雙向的客戶端和伺服器之間的通訊通道。 WebSockets 是 Web 應用程式中 HTTP 通訊的替代方案。 它們提供了一個長期存在的、雙向的客戶端和伺服器之間的通訊通道。 一旦建立，通道保持開啟，提供非常快速的連線速度和低延遲。 支援 WebSockets 的瀏覽器 所有現代瀏覽器都支援 WebSockets。 WebSockets 與 HTTP 的區別 HTTP 是一個非常不同的協議，也是一種不同的溝通方式。 HTTP 是一種請求/回應協議：當客戶端發出請求時，伺服器回傳一些資料。 而 WebSockets： 伺服器可以在未經客戶端明確請求的情況下傳送訊息給客戶端 客戶端和伺服器可以同時彼此對話 傳送訊息時需要交換的資料量非常少。這意味著通訊延遲低。 WebSockets 非常適合實時和長期存在的通訊。 HTTP 非常適合偶爾的資料交換和由客戶端啟動的互動。 HTTP 的實作要簡單得多，而 WebSockets 需要更多的開銷。 安全的 WebSockets 請總是使用安全、加密的 WebSockets 協議 wss://。 ws:// 是不安全的 WebSockets 版本（WebSockets 的 http://），出於明顯的原因應該避免使用。 建立新的 WebSockets 連線 const url = 'wss://myserver.com/somet hing' const connection = new WebSocket(url) connection 是一個 WebSocket 物件。 當連線建立成功時，將觸發 open 事件。...

在本教程中，我们将使用 Node.js 和 Express 构建一个 REST API。 该 API 将提供一组 GET 和 POST 端点，以允许获取数据和发送数据。 我们将使用 MongoDB 数据库存储这些数据。 提示：在继续本教程之前，请确保在您的系统上安装了 MongoDB 数据库（或者您可以使用 Cloud MongoDB 数据库，如果您更喜欢这种方式） 我们的任务是创建一个旅行成本计算器应用程序。 想象一下去旅行，你有一个应用程序（可以是渐进式 Web 应用程序，也可以是移动应用程序），你可以在其中添加你的任何费用。汽油、酒店、食物、门票等等。 当旅行结束时，你可以将其归档，并成为历史的一部分-你可以导航并查看过去旅行花费了多少钱。 我们这里不会创建应用程序的前端，只有 API。 现在让我们详细分解这个问题，并将其转化为一系列 API 端点。 端点是我们将调用以进行操作的唯一 URL。 比如，添加一个新的带有其名称的旅行。 在开始时，没有存储的旅行，我们需要添加一个。我想象应用程序会要求用户提供名称，并有一个“创建旅行”按钮。当点击时，应用程序会将名称发送给 /trip 端点，并使用 POST HTTP 方法。 我们有了第一个端点，它将接受一个 name 属性。 POST /trip { name } 另一个端点将列出旅行，它是： GET /trips 默认情况下，它将按照创建日期排序返回旅行。 当用户想要添加新的费用时，应用程序会使用 POST 方法调用 /expense 端点，并提供描述费用的一些参数。 POST /expense { trip, date, amount, category, description } trip 是当前选择的旅行的 ID。...

以下是我使用的方法來選擇具有特定表情符號的 Notion 頁面的所有子頁面： const notion = new Client({ auth: process.env.NOTION_API_KEY }) const pageId = process.env.NOTION_PAGE_ID async function getAllSubpagesOfPage(page, notion) { const pages = [] const blocks = await notion.blocks.children.list({ block_id: page.id, }) for (const block of blocks.results) { if (block.type === 'child_page') { //我們需要為該區塊添加圖標， //因為它不是默認提供的 const temp = await notion.pages.retrieve({ page_id: block.id }) block.icon = temp.icon pages.push(block) } } return pages } const pages = await getAllSubpagesOfPage(page, notion) pages.map(async (page) => { if (page....

語意化版本控制是一種常用於版本編號的慣例。 在 Node.js 的封包中，有一個很好的事情就是大家都同意使用語意化版本控制。 語意化版本控制的概念很簡單：所有版本都有三個數字：x.y.z。 第一位數字是主要版本 第二位數字是次要版本 第三位數字是修補版本 當你進行新版本發布時，你不能隨意將數字遞增，而是需要遵守一些規則： 如果你進行了不兼容的 API 更改，則將主要版本遞增 如果你以向後相容的方式新增功能，則將次要版本遞增 如果你進行了向後相容的錯誤修復，則將修補版本遞增 這種慣例在各種程式語言中都被採用，並且對每個 npm 封包都很重要，因為整個系統都取決於此。 為什麼如此重要呢？ 因為 npm 在我們運行 npm update 時，可以在 package.json 檔案 中使用一些規則來選擇要更新的版本。 這些規則使用以下符號： ^ ~ > >= < <= = - || 讓我們逐一了解這些規則： ^：如果你在運行 npm update 時輸入 ^0.13.0，它可以更新到修補版本和次要版本：0.13.1、0.14.0，以此類推。 ~：如果你在運行 npm update 時輸入 ~0.13.0，它只能更新到修補版本：0.13.1 是可以的，但 0.14.0 不行。 >：接受高於指定版本的任何版本 >=：接受等於或高於指定版本的任何版本 <=：接受等於或低於指定版本的任何版本 <：接受低於指定版本的任何版本 =：接受精確的版本 -：接受一個版本範圍。例如：2.1.0 - 2.6.2 ||：組合多個版本集合。例如：< 2.1 || > 2.6 您可以將某些符號組合在一起，例如使用 1.0.0 || >=1.1.0 <1.2.0，以使用 1.0.0 或從 1....

Prettier 是一個主觀的代碼格式化工具。它是保持您和團隊代碼格式一致的絕佳方式，並且支援許多不同的語言。 Prettier 簡介 選項較少 與 ESLint 的區別 安裝 Prettier 簡單入門 Prettier 簡介 Prettier 是一個主觀的代碼格式化工具。 它可以直接支援許多不同的語法，包括： JavaScript Flow, TypeScript CSS, SCSS, Less JSX GraphQL JSON Markdown 而通過使用 插件，您還可以在Python、PHP、Swift、Ruby、Java等語言中使用它。 它與許多常用的編輯器集成，包括 VS Code、Sublime Text、Atom 等等。 Prettier 在開發者中非常受歡迎，截至 2018 年 2 月已下載超過 350 萬次。 了解更多有關 Prettier 的重要連結： https://prettier.io/ https://github.com/prettier/prettier https://www.npmjs.com/package/prettier 選項較少 最近我學習了 Go 語言，其中最棒的事情之一就是 gofmt，這是一個官方工具，可以根據常見的標準自動為您格式化代碼。 95% 的 Go 代碼（估計數據）看起來都是一模一樣的，因為這個工具可以輕鬆地強制執行，並且由於樣式已經由 Go 維護者為您定義，所以您更有可能適應該標準，而不是堅持使用自己的風格，例如使用制表符還是空格，或者在哪裡放置左大括號。 這聽起來可能有些局限性，但它實際上非常強大。所有的 Go 代碼都是一模一樣的。 Prettier 是其它語言世界中的 gofmt。 它幾乎沒有什麼選項，大部分的決策已經為您定好，所以您可以停止就風格和細節問題進行爭論，並專注於寫代碼。 與 ESLint 的區別 ESLint 是一個檢查工具，它不僅僅可以格式化代碼，而且還能通過靜態分析程式碼來檢測錯誤。...

集合与列表有两个主要的不同之处： 集合是无序的。 集合中的每个元素只能出现一次。 使用以下命令创建一个集合： SADD <setkey> <value> 可以使用相同的命令向集合中添加更多的元素。 例如： SADD names "Flavio" SADD names "Roger" SADD names "Tony" "Mark" "Jane" 使用 SMEMBERS <setkey> 命令获取集合中的所有元素： 使用 SISMEMBER 命令判断一个值是否在集合中： SISMEMBER names "Flavio" 使用 SCARD 命令获取集合中元素的数量： SCARD names 使用 SRANDMEMBER 命令从集合中随机获取一个元素（但不移除）： SRANDMEMBER names 使用 SPOP 命令从集合中随机获取一个元素（并将其从集合中移除）： SPOP names 可以一次性地从集合中提取多个元素： SPOP names 2 使用 SREM 命令根据值从集合中移除一个元素： SREM names "Flavio" 使用 SINTER 命令获取两个不同集合中包含的元素，排除其中一个集合的元素： SINTER set1 set2 可以在这里查看所有集合的命令。

本教程是 Laravel 手册的一部分。从 https://flaviocopes.com/access/ 下载 首先要做的事是配置Vite，以启用使用Tailwind CSS进行样式设计。 首先打开终端，并运行以下命令： npm install -D tailwindcss postcss autoprefixer 如果您还没有安装npm，请先安装 Node.js。 这个命令将创建package.json文件、package-lock.json文件和node_modules文件夹。 然后运行以下命令： npx tailwindcss init -p 这将创建tailwind.config.js和postcss.config.js文件。 （如果您不熟悉npx，可以查看我的npx教程。它会随着 Node.js 的安装自动安装为npm。） 现在打开tailwind.config.js，添加以下内容： /** @type {import('tailwindcss').Config} */ export default { content: ["./resources/**/*.blade.php"], theme: { extend: {}, }, plugins: [], }; 在resources/css/app.css中添加以下内容： @tailwind base; @tailwind components; @tailwind utilities; 最后，在终端中运行npm run dev，并在开发站点时保持其运行，同时运行php artisan serve（在两个不同的终端窗口中运行）。 现在我们可以在 Blade 模板中使用 Tailwind CSS 了！ 将下面这行代码添加到页面的head部分： <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1....

最近，我使用 TypeScript 在 Deno 中建立了一個範例專案，並且需要對一個物件進行解構。我對 TypeScript 基礎有一定的了解，但有時候還是會遇到問題。 其中之一就是物件解構。 我想要這樣寫： const { name, age } = body.value 我嘗試這樣加上 string 和 number 類型註解： const { name: string, age: number } = body.value 但這並不正確。雖然程式碼看起來好像沒有問題，但實際上這會將 name 屬性賦值給 string 變數，並將 age 屬性值賦值給 number 變數。 正確的語法應該是這樣： const { name, age }: { name: string; age: number } = body.value 處理這種情況的最佳方式是為這些資料創建一個類型或介面： interface Dog { name: string age: number } 然後你可以使用更簡潔的方式來寫上述程式碼： const dog: Dog = body.value

當我需要創建React應用程式並需要後端時，我會首選使用 Next.js 框架。 Next.js 提供了許多內建功能，它非常受歡迎，遵循的約定也避免了我在分析和決策方面的困惑。 但有時我只想創建一個單純的 React 應用程式，也許是為了進行演示或開始一個專案，而不需要 Next.js 提供的所有內容。 我不想擔心這些，我只想自由地進行 React 實驗。 我過去使用過 create-react-app，但現在我使用 Vite。 Vite 是一個現代化的工具，提供了開發伺服器，速度非常快，許多 JavaScript 社群的人認為它是最佳選擇。 此外，它並不是一個特定於 React 的工具，因此你學到的任何東西都可以應用到其他支援的框架，例如Svelte、Vue等。 要使用 Vite 創建一個項目，首先進入你存放所有專案的文件夾，例如我個人的案例中是在用戶的主文件夾中的 dev 文件夾下。 然後運行 npm create [[email protected]](/cdn-cgi/l/email-protection)。 為項目選擇一個名稱，該名稱也將是項目的文件夾名稱。在這個案例中，我選擇 “test”： 現在可以選擇一個框架，選擇 “React”。 然後選擇 JavaScript 或 TypeScript，依照個人喜好選擇。你也可以選擇使用 SWC。 完成！ 現在進入新建立的專案資料夾： cd test 運行以下指令安裝相依套件： npm install 然後運行以下指令開始應用程式： npm run dev 應用程式應該會在 http://localhost:5173 運行（如果該埠口已被使用，則可能會不同）。 現在你已經準備好在此應用程式上工作了！ 以下是在 VS Code 中打開的應用程式資料夾。 你可以看到，Vite 已經創建了一個基本的應用程式，現在你可以打開 src/App.jsx 開始在其中進行開發工作。 這樣的工具之美在於，現在你可以新增文件，Vite 會自動識別它們，而無需像我們以前需要在 Node.js 專案中那樣重啟 npm run dev。...

我最喜欢的代码编辑器是来自微软的 VS Code。在过去的20年里，我使用过许多编辑器，但这是迄今为止最好的。 VS Code 是开源的，即使在我的不太新的 MacBook Pro 上也很快，它从不在进行中崩溃，它可以自定义扩展，但开箱即用效果也很好。 这一切都很棒，但是如何调试 Go 程序呢？你可能认为需要一个笨重的 IDE，但事实并非如此。通过 Delve，由 Derek Parker 开发的工具，调试 Go 程序非常简单。 首先，当然，你需要安装官方的 Go VS Code 扩展，并且确保已配置好 $GOPATH。 安装完成后，在 Linux/Windows 上，你只需要执行命令 Go: Install/Update Tools。在 Mac 上，你需要通过 Brew 下载 Delve，只需要在你喜欢的 Shell（应该是 zsh）中键入 brew install go-delve/delve/delve - 文档中提到了自签名，但 Brew 会替你处理这个问题。 完成后，设置调试器配置。 点击 VS Code 的 调试菜单，点击“开始调试”，或者按下 F5 键。 VS Code 将调试信息放在工作区根目录下的 .vscode/launch.json 文件中。这个文件将会自动生成，并且应该能够直接用于本地调试： { "version": "0.2.0", "configurations": [ { "name": "Launch", "type": "go", "request": "launch", "mode": "debug", "remotePath": "", "port": 2345, "host": "127....