JavaScript >> Javascript 文檔 >  >> Node.js

使用 Node.js 和 WebGL 的實時訪客地球

在這篇文章中,我們想與您分享我們使用 Node.js 和 WebGL 創建的一個很酷的項目。這是一個地球地圖,您可以使用它來實時跟踪使用您的網絡應用程序的人。快速設置後,您將能夠查看您網站上每個人的位置,在全球範圍內精確定位並按國家/地區分組。該演示也是完全響應式的,並且可以在移動設備上運行(只要它們支持 webgl)。

我們是怎麼做到的

  • 對於應用程序的服務器端,我們使用了一些 Node.js 模塊:
    • Express 是網絡框架。
    • 請求在 Node 中執行 ajax 請求。
    • Is-bot 用於捕獲搜索引擎爬蟲。
  • 地球:
    • 多虧了 WebGL Earth,地球本身才成為可能。
    • 用於地圖圖塊的 OpenStreetMap。
  • 設計:
    • 側邊菜單完全使用 CSS 進行動畫處理。
    • 一些用於前端的 jQuery。
  • freegeoip.net 的幫助下查找 IP 地址的坐標 geoplugin.com。

如何運行

如果你想在本地運行這個應用程序,首先要做的是確保你的機器上安裝了 node.js。之後,下載並解壓縮包含代碼的存檔(您可以從上面的按鈕下載)到名為 nodejs-visior-globe 的文件夾 .完成後,打開終端並導航到新創建的文件夾。在那裡,運行以下命令來安裝所需的 npm 包:

npm install

完成此過程後,運行以下代碼並在瀏覽器中訪問 http://localhost:8888。

node app.js

在那裡你會看到地球。但是,您可能會注意到地圖上沒有任何人。那是因為整個事情都是離線工作的,因為我們需要一個活動服務器,這還不夠。

將其與您的網站集成

在您在全球範圍內看到您的網站訪問者之前,您需要做兩件事:

  1. 將應用上傳到 Heroku 等託管服務。我們之前已經介紹瞭如何將您的代碼部署到 heroku。指令完全相同。唯一的區別是您最終將獲得新地球的 URL,而不是私人聊天應用程序。
  2. 在您的網站上添加一張特殊的跟踪圖片。您可以通過將此 html 添加到您網站的每個頁面的頁腳 <img src="http://yourglobe/ping" width="1" height="1" style="display:none" /> 來做到這一點 .替換 yourglobe 使用您的應用程序的 heroku url。如果您在瀏覽器中加載圖像的 src url,您應該會看到文本“完成”。

跟踪圖像是嵌入在您網站的每個頁面上的不可見圖像,它指向 http://yourglobeurl.com/ping。當人們加載您的網站時,他們的瀏覽器會自動加載所有圖像,這會導致跟踪 URL 也被加載。我們的應用程序偵聽該特定 URL,並獲取訪問者的 IP 地址,找到他們的位置並保存它。用戶在訪問您的網站後最多 5 分鐘被視為在線(這可以在 app.js 中配置)。

全部完成!您現在可以享受您的實時訪問者地球了!

設計

我們所有的時事通訊訂閱者都可以免費獲得該設計的 PSD!從這裡加入或登錄以下載它。

這總結了我們的訪客全球。我們希望你喜歡它!如果您有任何建議或問題,請隨時在下面發表評論。


Tutorial JavaScript 教程
  1. React 需要了解的 JavaScript  — 第 1 部分

  2. 我的 Create-React-app 博客網站帖子出現在 google 搜索中,為什麼?

  3. 使用 Strapi、Netlify 和 React 構建博客

  4. 使用 Bootstrap 4 構建 React 登錄和註冊 UI 模板

  5. 使畫布填滿整個頁面

  6. 身份驗證 - 使用 React 系列探索 Appwrite.io

  7. 前端世界

  1. AWS Lambda 上的無服務器 API 的 JWT 授權

  2. JavaScript `undefined` vs `void 0`

  3. 接口隔離原則

  4. 樣式化組件 vs Emotion js:性能視角

  5. 我可以讓 <button> 不提交表單嗎?

  6. Vue.js 注意mounted不保證所有子組件也都已經掛載了?

  7. 在 Svelte 中切換本地存儲項目

  1. 0.85 後讓 Flow 快樂

  2. 使用Javascript阻止元素發送到下一行[關閉]

  3. 在 Javascript 中使用正則表達式刪除 HTML 註釋

  4. 帶有 PayPal 結賬功能的開源 React eccomerce Web 應用程序