如何快速搭建私密在線聊天室

05-15

作者：陸宣羽 CODING 技術佈道師，主要負責傳播 CODING 技術實踐及願景理念，宣講 CODING 團隊在研發過程中所運用的前沿技術

互聯網時代，個人隱私安全問題正越來越受到重視。比如，在跟朋友聊天時，會經常因為擔心聊天內容被無良公司從後台窺視而避免輸入私密內容。面對這種情況，會有程序員建議自己搭一個聊天室以確保自己的隱私安全。

通常情況下，採取這種措施，你需要：

①自己架設一台伺服器（軟體+硬體），或者，在雲時代，建立一台雲伺服器。

②向域名提供商購買一個域名。

③配置防火牆等安全條例以防止黑客攻擊/入侵。

④安裝代碼、資料庫運行所需要的環境，比如 LNMP。

⑤編寫你的個人聊天室。

以上內容的複雜繁瑣程度以及經濟消耗大概已經大大超過了普通人對於隱私保護的需求，當然，如果這些涉及到軍事以及商業機密，那你當我沒說

。

本篇文章將介紹一種簡便的方法幫助你快速搭建一個屬於自己的聊天室：Cloud Studio + Node.js + Express.js + http://Socket.io

Cloud Studio

Cloud Studio 是騰訊雲聯合 CODING 共同推出的一款基於騰訊雲小主機，集 Web IDE，Git，協同編輯，在線運行環境於一體的雲端開發協作平台。

伺服器線上環境置於騰訊雲小主機內，具備原生的 Linux 線上終端，涵蓋多種編程語言開發環境支持快速切換，直接生成訪問鏈接無需購買域名。你需要做的只是在自己專屬的 workspace 下進行開發工作。

Node.js

Node.js 是一個伺服器端 JavaScript 運行環境，通過非同步處理、事件驅動以及非阻塞 I/O 模型，使你的 Web 應用更加輕量、高效，實時快速被動更新頁面信息。

Express.js

Express.js 是一個基於 Node.js 的靈活、極簡的 Web 應用框架。

http://Socket.io

http://Socket.io 是一個即時、雙向、基於事件驅動的 JavaScript 庫。

本篇，將在 Express.js 框架下使用 http://Socket.io 完成並上線一個簡單的在線聊天應用。

1. 進入你的 Cloud Studio 應用主界面。

2. 在右邊欄點擊展開運行環境，選擇Node.js環境，點擊使用並確定切換。

3. 創建一個新的文件夾，用來編輯我們的代碼，這裡將這個文件夾命名chat_room。你可以在左邊欄文樹內空白處點擊右鍵，新建文件夾；也可以直接在下方終端里輸入 mkdir chat_room 來實現。

4. 進入chat_room目錄下，可以直接將 GitHub 上的代碼克隆下來git clone https://github.com/socketio/chat-example.git，也可以邊看教程，邊上手編程，一步步熟悉並學習 Node.js 的實現。這裡，我們將一步一步編寫我們的聊天室應用。

5. 接下來我們npm init初始化我們的聊天應用，

並安裝相應的模塊。npm install --save express socket.io

等待運行結束，展開chat_room目錄你會看到npm已經幫我們生成好了 manifest 文件package.json並預裝好了我們所要用到的庫。

6. 接下來，我們創建聊天室主界面index.html。

<!doctype html><html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> </body></html>

7.創建index.js配置聊天室應用，在埠8080監聽並回應HTTP GET請求返index.html給前端。

var app = require(express)();var http = require(http).Server(app);app.get(/, function(req, res){res.sendFile(__dirname + /index.html);});http.listen(8080, function(){ console.log(listening on *:8080);});

8. 這樣，一個空白的主界面就已經搭建好了，左邊欄文件樹如下圖所示，

在終端里，運行node index.js開啟 Web 伺服器。

我們已經可以在右邊欄訪問鏈接里生成一個訪問鏈接並查看效果，這個鏈接只有一小時的有效時間，Cloud Studio 鑽石會員可以選擇將鏈接轉為永久有效，免去每次聊天需要給朋友發鏈接的麻煩。

點擊該鏈接，已經可以看到我們的聊天室框架。

9. 接下來我們將用Socket.io來實現即時聊天功能，首先修改index.js，添加

var io = require(socket.io)(http);io.on(connection, function(socket){ console.log(a user connected); socket.on(disconnect, function(){ console.log(user disconnected); });});

10. 在前端頁面index.html里添加如下JavaScript

<script src="/socket.io/socket.io.js"></script><script> var socket = io();</script>

11.以上加入了我們在訪問頁面的時候由客戶端發起的 http://Socket.io 連接的接通與斷開

12.接下來，我們開始編寫由客戶端向服務端發送任意事件與數據，在index.html里修改如下代碼

<script src="/socket.io/socket.io.js"></script><script src="https://code.jquery.com/jquery-1.11.1.js"></script><script> $(function () { var socket = io(); $(form).submit(function(){ socket.emit(chat message, $(#m).val()); $(#m).val(); return false; }); });</script>