軟體工程-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功能，建立更完善的聊天對話紀錄及使用者行為紀錄
  • 允許使用者自行上傳音樂，客製化背景音樂

THE end

Thanks

Made with Slides.com