軟體工程-final project

網頁聊天室

資工大二～蘇盈安

資工大二 ~ 陳彥瑋

開發人員

User Requirement

建立一個簡易網頁版聊天室可以讓使用者匿名聊天，並即時顯示聊
天內容，聊天的內容不僅限於文字，可以是圖片，並可以轉傳超連
結網址，同時在網頁聊天室的背景播放音樂 ; 

建置完成的聊天室程式希望可以便於安裝，並不需要安裝一堆依賴
的性的伺服器套件，也不需要做一些額外的複雜設定即可簡易上線
提供聊天服務，並支援大部分瀏覽器，或是手機

 Environment

OS: ubuntu 16.04

Language:

• Front-End: html + css + javascript​​
• Back-End: node.JS

Programs Architecture

Server

• app.js

               Client

• chat.js
• chatui.js
• index.html
• style.css

                Module

• express
• jquery
• socket.io
• mediaserver

Functional

• ​http server傳送網頁前端資料給client（含背景音樂）

• chat server能夠建立多人同時連線，並進一步紀錄所有發生事
  件的log，出現錯誤時便以追蹤

• 新成員登入，加入新的成員到清單，並通知新使用者名稱給所有client ，並更新聊天室名單
• 使用者傳送聊天訊息及圖片或轉送網址，server收到傳來的聊天訊息，即時傳送給所有client
• 使用者更改登入暱稱後，server收到更改的請求，通知所有client該使用者新暱稱
• 下線離開聊天室後，廣播通知所有在線者，有人離開聊天對話

Non Functional

• 聊天室server系統平台簡易安裝及相容性（安裝node.js）

• 瀏覽器相容性（chrome/ firefox）
• 保持聊天室界面簡單不撩亂，將部份功能元件隱藏，必要時才開啟（jquery動畫）
• 即時傳送聊天訊息及圖片不會延遲，並顯示發送聊天訊息時間，對話內容順序不會混亂
• 可接受手機連線，並能夠以手機拍照上傳相片
• server端將所有事件log呈現出來
• 阻擋不必要的訊息傳送（空白的訊息及錯誤的網址等）

Architecture

client-server

Internet

Client

Client

Client

Http

Chat

Diagram

Use Case

Principle object class

• socket~用於server及client資料訊息交換類似封包

• server~主要是處理各使用者間訊息的交換及觸發client端事件

• client~主要是處理關於server端送來的觸發事件用於瀏覽器UI界面的呈現

User Interface

log in first time

從跳出視窗輸入聊天室使用者名稱

music player

播放及控制背景音樂

Title Text

聊天訊息輸入

聊天訊息呈現

rename

從form輸入新的使用者暱稱

Title Text

改暱稱前

更改後

Title Text

上傳圖片視窗

上傳圖片後

Title Text

聊天訊息是URL , 會以超連結的html標籤呈現

Title Text

server後端的log紀錄呈現方式,詳紀各個使用者的聊天訊息及觸發之事件,以及伺服端的應對方式

Inatsll guidance

1. 安裝node.js  javascript運行環境
2. 執行npm install~根據package.json自動載入模組
3. 設定防火牆port : 5555
4. 啟動伺服端程式，執行node app.js

後續發展

• 持續維護並擴充功能 , 能夠上傳其他格式的檔案而不僅限於傳送圖片而已
• 能加入dataBase功能，建立更完善的聊天對話紀錄及使用者行為紀錄
• 允許使用者自行上傳音樂，客製化背景音樂