搭建

首先选择一种已有服务器搭建好，用HTML5和APICloud（或者其他的可以打包H5app的框架）做客户端，Websocket（telnet/http/socket）与服务器通信，Sqlite3做数据库。

客户端编写有三种方案。

  1. 用多个HTML页面
    这种方式会出现无法在多个页面中通用WebSocket的问题。
  2. 用一个iframe改变src
    可以通在主页面写websocket，但是主页面与子页面部分js代码会冲突
  3. 每个页面放到一个DIV中，然后用js控制DIV显示与否。display:none/block 这样能避开很多问题，就是一个页面内容多了点。
function tab(id)
    	{
    		$(".panel_slider").css("display", "none");
    		$("#"+id).css("display", "block");
    	}
    	或者
    	function randomSwitchBtn(tag)
	    {
			if(tag == "world")
			{
				$("#person").css("display","none");
				$("#world").css("display","block");;
			}
			else if(tag == "person")
			{
				$("#world").css("display","none");
				$("#person").css("display","block");
			}
	    }

服务器数据解析

多数服务器传出的数据都是JSON和[String Object]形式的，不同数据格式解析方式不同，比如JSON

var decodeData;
 		//是JSON串解码，不是则赋值
		try{
			decodeData = JSON.parse(inputJsonData);
		}
		catch(e){
			decodeData = inputJsonData;
		}

布局

属性展示和功能按键布局主要用Table，这样看起来整齐，那种类似控制台可以不断滚动出一条条的内容的用div，设置成带滚动条和自动定位到最新输出信息。

样式

css可以把很多类似的div用同一个class名字，设置共有的样式，然后在给这些div分别设置id，再给每个id设置如weith，height这样的私有的样式。类似下面这样

/*panel*/
		.panel{border:2px solid #fff;font-size:12px; line-height:24px; word-wrap:break-word; overflow:auto;   word-break:break-all;}			
		
		/*news panel*/
		#panel_news{width:auto;height:180px;}	
		/*describe panel*/		
		#panel_describe{ width:auto;height:70px;position:relative; top:15px;}

弹窗

推荐用 layer 这种框架 做弹窗相关功能，也可以手写，如下

<div id="win_thingsShow" style="text-align:center; border:1px red solid; width:60%; height:50%;position: absolute;top:25%;left:20%;display: none;">
	<!--title-->
	<div style="background-color: blue;color: red;">
		<!--close-->
		<span id="win_thingsShow_title"style="margin:auto;color:red;">标题文字</span>
		<span id="win_thingsShow_close"style="margin-left: 95%;color:red;cursor: pointer;"onclick='hideWin()'>X</span>
	</div>
	<!--desc-->
	<div id="win_thingsShow_desc"style="background-color:#0099FF;color: red;">我是描述</div>
	<!--context-->
	<div id="win_thingsShow_context"style="background-color:#0099FF;color: red;">
	</div>
</div>

//js代码
   function openWin()
   {
   		$("#win_thingsShow").css("display","block")
   }
   function hideWin()
   {
   		$("#win_thingsShow").css("display","none")
   		$("#win_thingsShow_context").html("");
   }

宽度和高度很多可以用x% 百分数代替具体数值，想要div居中，主要是父DIVtext-aline:center，子DIV margin:auto，居于底部的话position: fixed;bottom: 0px;

数据接受后处理方法

可以写一个xxxModel和一个xxxProcess，xxx是接受的JSON数据的key或二进制数据的头部，然后用类似于简单工厂+反射的效果

比如websocked收到的JSON数据触发方法，方法里xxx自动变成的key，然后简单工厂创建keyModel数据模型对象，和先编写好keyProcess方法，再反射实现它，js可以这样实现：

dataModel = new window[type+"Model"](context);//类似与简单工厂
eval（"this."+type+"Process"+"()");//类似于反射

这样可以避免写switch做大量判断，