創建並運行 Socket.io 專案
什麼是 Socket.io?
Socket.io 是一個用於實時雙向事件驅動通信的 JavaScript 庫。它可以在瀏覽器和伺服器之間建立高效、低延遲的通信通道。Socket.io 支持 WebSocket 協議,但不僅限於此,它還可以自動選擇最佳的傳輸機制(如長輪詢)以確保連接的穩定性。
Socket.io 的主要特性和優勢
- 實時通信:支持實時雙向通信,適用於聊天室、在線遊戲、實時通知等應用場景。
- 跨平台支持:可以在瀏覽器、Node.js 和其他平台上運行。
- 自動重連:在連接斷開時自動嘗試重新連接。
- 事件驅動:通過事件機制進行通信,簡化了編程模型。
- 高兼容性:支持多種傳輸機制,如 WebSocket、XHR 長輪詢等,確保在各種網絡環境下都能正常工作。
使用 Socket.io,可以幫助開發者快速構建高效的實時通信應用。
使用 ServBay 創建並運行 Socket.io 專案
在這篇文章中,我們將使用 ServBay 提供的 Node.js 環境來創建並運行一個 Socket.io 專案。我們將使用 ServBay 的『主機』功能來設置 Web 伺服器,並通過反向代理來實現專案的訪問。
創建 Socket.io 專案
初始化專案
首先,確保您已經安裝了 ServBay 提供的 Node.js 環境。然後,在 ServBay 建議的網站根目錄
/Applications/ServBay/www
中創建一個新的 Socket.io 專案:bashcd /Applications/ServBay/www mkdir servbay-socketio-app cd servbay-socketio-app npm init -y npm install express socket.io
1
2
3
4
5創建伺服器文件
在專案根目錄下創建一個
server.js
文件,並添加以下代碼:javascriptconst express = require('express'); const http = require('http'); const socketIo = require('socket.io'); const app = express(); const server = http.createServer(app); const io = socketIo(server); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); io.on('connection', (socket) => { console.log('a user connected'); socket.on('disconnect', () => { console.log('user disconnected'); }); socket.on('chat message', (msg) => { io.emit('chat message', msg); }); }); const port = process.env.PORT || 3000; server.listen(port, () => { console.log(`Server running on port ${port}`); });
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
26創建客戶端文件
在專案根目錄下創建一個
index.html
文件,並添加以下代碼:html<!DOCTYPE html> <html> <head> <title>Socket.io Chat with ServBay</title> <style> ul { list-style-type: none; padding: 0; } li { padding: 8px; margin-bottom: 10px; background-color: #f3f3f3; } input { padding: 10px; width: 300px; } button { padding: 10px; } .servbay-banner { background-color: #4CAF50; color: white; text-align: center; padding: 10px 0; font-size: 20px; margin-bottom: 20px; } </style> </head> <body> <div class="servbay-banner">Welcome to ServBay Socket.io Chat!</div> <ul id="messages"></ul> <form id="form" action=""> <input id="input" autocomplete="off" /><button>Send</button> </form> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); var form = document.getElementById('form'); var input = document.getElementById('input'); form.addEventListener('submit', function(e) { e.preventDefault(); if (input.value) { socket.emit('chat message', input.value); input.value = ''; } }); socket.on('chat message', function(msg) { var item = document.createElement('li'); item.textContent = msg; document.getElementById('messages').appendChild(item); window.scrollTo(0, document.body.scrollHeight); }); </script> </body> </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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
進入開發模式
運行開發伺服器
啟動開發伺服器並指定端口(例如:8585):
bashPORT=8585 node server.js
1這將會在本地啟動一個開發伺服器,並暴露端口 8585。
配置 ServBay 主機反向代理
使用 ServBay 的『主機』功能,通過反向代理來訪問開發伺服器。在 ServBay 的『主機』設置中,添加一個新的反向代理:
- 名字:
My first Socket.io dev site
- 域名:
servbay-socketio-test.dev
- 主機類型:
反向代理
- IP:
127.0.0.1
- 端口:
8585
詳細設置步驟請參考添加Nodejs開發的網站。
- 名字:
訪問開發模式
打開瀏覽器,訪問
https://servbay-socketio-test.dev
,實時查看專案。由於 ServBay 支持自定義域名以及免費的 SSL 證書,您將享受到更高的安全性。
部署生產版本
準備生產環境
確保您的專案在生產環境中可以正常運行。通常,Socket.io 專案不需要特別的構建步驟,但您可能需要設置一些環境變量或進行其他配置。
運行生產伺服器
啟動生產伺服器並指定端口(例如:8586):
bashPORT=8586 NODE_ENV=production node server.js
1配置 ServBay 主機反向代理
使用 ServBay 的『主機』功能,通過反向代理來訪問生產伺服器。在 ServBay 的『主機』設置中,添加一個新的反向代理:
- 名字:
My first Socket.io production site
- 域名:
servbay-socketio-test.prod
- 主機類型:
反向代理
- IP:
127.0.0.1
- 端口:
8586
- 名字:
訪問生產模式
打開瀏覽器,訪問
https://servbay-socketio-test.prod
,查看生產版本。通過 ServBay 的自定義域名和免費的 SSL 證書,您的網站將具有更高的安全性和可信度。
數據庫連接
ServBay 提供了 Redis、MariaDB、PostgreSQL 和 MongoDB 數據庫支持。以下是如何連接這些數據庫的示例。
連接 MongoDB
安裝
mongoose
:bashnpm install mongoose
1然後在專案中引用並連接:
javascriptconst mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/servbay-socketio-app', { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => console.log('MongoDB connected')) .catch(err => console.log(err));
1
2
3
4
5連接 Redis
安裝
redis
:bashnpm install redis
1