>本文演示了使用socket.io和backbone.js構(gòu)建一個(gè)簡單的聊天應(yīng)用程序。 socket.io促進(jìn)實(shí)時(shí)，交互式Web應(yīng)用程序，而Backbone.js則構(gòu)造了客戶端代碼，以進(jìn)行更好的管理和解耦。 假定對(duì)Node.js和Express的熟悉；骨乾和下劃線知識(shí)是有益的。

>

密鑰概念：

• 聊天應(yīng)用程序利用socket.io和backbone.js進(jìn)行實(shí)時(shí)功能和客戶端組織。
• >客戶端交互由HomeView>管理，該>>>>使用HomeModel。骨幹收集基於模型更改動(dòng)態(tài)更新視圖。 socket.io客戶端處理服務(wù)器通信。
• >服務(wù)器（node.js，express，socket.io）維護(hù)在線用戶並廣播消息。 核心服務(wù)器事件是'connection'。
• > socket.io簡化了客戶端服務(wù)器的通信，為各種平臺(tái)和後端技術(shù)提供庫（儘管主要是為node.js設(shè)計(jì)的）。
• >安全性（HTTPS，JWT）和可擴(kuò)展性（REDIS適配器，負(fù)載平衡器，Node.js群集）是開發(fā)人員職責(zé)。
>

客戶端體系結(jié)構(gòu)：

>圖（請(qǐng)參見下圖）說明了客戶端結(jié)構(gòu)：橋接socket.io客戶端和視圖，基於客戶端輸入更新模型，並通過骨幹綁定在視圖中反映視圖中的變化。 >

客戶端代碼突出顯示：>

• （/public/js/models/main.js）：

  >管理和HomeModel collections（使用>和onlineUsers）。包括用於添加和刪除用戶和聊天的方法。 userChats UserModel ChatModel

主頁模板（/public/index.html）：
• >定義聊天界面的HTML結(jié)構(gòu)，包括聊天列表和在線用戶列表。

  >

• >

  ）： socket.io client，負(fù)責(zé)連接到服務(wù)器（ - 用服務(wù)器地址替換），發(fā)送消息（發(fā)送消息（ ChatClient，）和處理服務(wù)器事件（，http://chatfree.herokuapp.com，login，chat，welcome，loginNameExists，loginNameBad，onlineUsers）。 它使用userJoined發(fā)送和userLeft接收消息。chat>

• MainController（/public/js/main.js）：使用事件總線（appEventBus，viewEventBus）協(xié)調(diào)視圖，模型和socket.io客戶端之間的交流。 處理登錄，聊天消息，用戶加入/離開，並相應(yīng)地更新模型。

  >

• > bootstrap（/public/js/main.js）：初始化MainController

  以啟動(dòng)應(yīng)用程序。

服務(wù)器端實(shí)現(xiàn)：

服務(wù)器端代碼使用node.js，express和socket.io。

• express Server（/scripts/web.js）：設(shè)置Express Server，從>目錄中提供靜態(tài)文件，然後初始化socket.io Server。 public

• （/scripts/chatserver.js）：>管理在線用戶（ChatServerarray），handles事件，管理用戶登錄（users> event），處理脫節(jié)（ 'connection'事件），管理在線用戶列表（login事件），並廣播聊天消息（disconnect>事件）。 它使用onlineUsers>模型代表連接的用戶。 chat User

聊天協(xié)議圖：

>圖（請(qǐng)參見下圖）說明了客戶端和服務(wù)器之間的消息流。

>結(jié)論和常見問題解答：

>本文結(jié)束了總結(jié)應(yīng)用程序的功能並解決有關(guān)安全性，可擴(kuò)展性，數(shù)據(jù)持久性，私人消息傳遞，錯(cuò)誤處理和測試的常見問題解答。 這些常見問題解答為增強(qiáng)和擴(kuò)展基本聊天應(yīng)用程序提供了實(shí)用的指導(dǎo)。 原始文本的常見問題解答部分保留了整體。

>

以上是使用socket.io的聊天應(yīng)用程序的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！