使用軟體及技術

軟體

 系統： 

• Cent OS 7
• Apache Tomcat 8
• Mysql Community Server 5.6.22
• Java SE 8
• Node.js 0.10.33

開發環境：

• Sublime Text 3
• Mysql Workbench 6.2

套件與技術

• HTML5 Web Socket
• Node.js ws
• jQuery 2.1.3
• Bootstrap 3.3.1
• GSON
• Mysql jdbc connector

系統介紹

概述

        由於某些原因，我們並未完成此系統，在此深感抱歉。

         我們做的是常見的留言板系統，透過Web Socket的技術通知使用者有新的留言。

EER Diagram

虛線的部分

似乎是不會將

外來鍵當主鍵使用

Backend

概述

         由於我平常習慣製作伺服器程式碼，因此後端功能較為完整。

         而這是第一次使用jsp語法撰寫，因此耗費較多時間。

         在後端的部分，我們使用了sha-512的加密技術，並且以PreparedStatement進行SQL Escape，我們也做了簡單的XSS Escape語法；至於處理json的部份我們使用Google所提供的GSON套件進行

部分程式碼

SQLEscape(以登出為例)(Java

public JsonObject logout(String token){
	JsonObject res=new JsonObject();
	res.addProperty("result",0);
	try{
		PreparedStatement lo=this.db.prepareStatement("update `user` set `user_token_exptime`=current_timestamp where `user_token_value`=?");
		lo.setString(1,token);
		if(lo.executeUpdate()==1){
			res.remove("result");
			res.addProperty("result",1);
		}
	}
	catch (Exception e){}
	return res;
}

XSS Escape(Java

public String simpleXSSProtection(String regular){
	regular=regular.replaceAll("&","&");
	regular=regular.replaceAll("\"",""");
	regular=regular.replaceAll("\'","'");
	regular=regular.replaceAll("<","<");
	regular=regular.replaceAll(">",">");
	return regular;
}
//本程式碼由PHP改編而成

ResultSet 轉 JSON((Java

public JsonObject ResultSetToJsonObject(ResultSet rs) {
	JsonObject element = null;
	JsonArray ja = new JsonArray();
	JsonObject jo = new JsonObject();
	ResultSetMetaData rsmd = null;
	String columnName, columnValue = null;
	try {
		rsmd = rs.getMetaData();
		while (rs.next()) {
			element = new JsonObject();
			for (int i = 0; i < rsmd.getColumnCount(); i++) {
				columnName = rsmd.getColumnName(i + 1);
				columnValue = rs.getString(columnName);
				element.addProperty(columnName, columnValue);
			}
			ja.add(element);
		}
		jo.add("result", ja);
	} catch (SQLException e) {
		e.printStackTrace();
	}
	return jo;
}
//此程式碼來自：https://jackypan1989.wordpress.com/2012/07/18/java-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-convert-resultset-to-json/

WebSocket Server(node.js

var wsst=require("ws").Server,
	wss=new wsst({port:3000});
wss.on("connection",function(ws){
	ws.on("message",function(res){
		broadcast(res);
	});
	ws.send(JSON.stringify({"result":"succeed"}));
});
function broadcast(data) {
	wss.clients.forEach(function each(client) {
		client.send(JSON.stringify({"newMessage":1}));
	});
};
//使用方式：
//1.請先安裝node.js npm
//2.請使用npm install ws這個指令安裝ws套件(雖然說目錄中有)
//3.此檔案為wss.js，請使用node wss.js執行
//P.S.:如果要背景執行的話請使用sudo npm install forever -g進行全域安裝，安裝完後使用forever start wss.js即可

Front End

概述

         此為未完成之部分。

         前端部分使用的套件及技術有jQuery、Bootstrap、WebSocket，而因為我的觀念，所以前端網頁的部分只有HTML、CSS、JavaScript而已，未實作的ajax功能是使用$.ajax()這個函數，其他較特殊的部分有JavaScript讀寫Cookie(因為前端網頁沒用PHP、JSP等候端程式碼)、Web Socket Client的部分。

         目前尚未完成的部分為.ajax抓取資料、Web Socket傳送資料的部分。

Cookie讀寫

var cookies={
	getCookieData:function(index){
		cookieData=document.cookie;
		cookieData=cookieData.toString();
		if(cookieData.match(index)){
			return cookieData.split(index)[1].split(";")[0];
		}
		else return 0;
	},
	setCookieData:function(name,value,expireHR){
		var expire=new Date();
		expire.setDate(expire.gateDate+expireHR*3600*1000);
		document.cookie=name+"="+value+";expires="+expire.toGMTString();
	}
};

Web Socket Client

var index=1,ws,wssvr=[
	"ws://163.17.136.252:3000/",
	"ws://192.168.0.198:3000/",
]

function createWebSocket(){
	ws=new WebSocket(wssvr[index]);

	ws.onopen=function(){
		console.clear();
		console.info("Connection start");
	};
	ws.onmessage=function(response){
		var resData=JSON.parse(response.data);
		if(resData.newMessage==1)$("#newmsg-imform").fadeIn("slow");
		setTimeout(function(){
			$("#newmsg-imform").fadeOut("slow");
		},2500)
	};
	ws.onerror=function(response){
		console.error("Some Error Occured");
		if(index=1)index=0;
		else index=1;
		createWebSocket()
	};
	ws.onclose=function(){
		console.info("Attempt To Reconnecting...");
	}
}

心得

        這次開發的困難，應該在語法不熟的部分吧，由於我不太擅長Java的語法，加上太晚開發，造成現在無法完成。

        而Server管理的部分，Cent OS(Linux)、Mysql、Java是已經裝好的東西，但是在Tomcat安裝及設定的部分讓我頭痛了一段時間，而Cent OS因為我一開始是安裝純文字介面，造成管理搞得我昏頭轉向，而某次的Server重灌更使得我做不太下去，我只覺得，這一切的一切都是我太高估了自己的實力以及過度的自信造成我今天沒辦法完成這次的報告。

        印象中，弘明老師曾說：「網頁不像一般Application，是會一直不停地開發下去」這個系統我希望未來可以串起我們這組的熱情，繼續地完成

附註

• 伺服器是使用Java SE 8開發而成，某些語法(例如Switch可以使用String當作索引值使用)
• 伺服器內有個.js檔案，是使用Node.js開發完成的
• 將會附上本系統使用之.jar檔與.sql檔