var toName;

var username;

function showChat(name){   // 點選右側好友列表顯示top的正在和誰聊天

　　toName=name;

　　// 現在聊天對話方塊

　　$('#chatArea').css('display','inline')

　　// 顯示正在和誰聊天

　　$('#chatMes').html('正在和<font face=\"楷體\">'+toName+'</font>聊天')

}

$(function(){

　　$.ajax({

　　　　url: 'getUsername',

　　　　success: function(res){

　　　　　　username=res;

　　　　　　// 顯示線上資訊

　　　　　　$('#userName').html('使用者：'+res+'<span style="float:right;color:green">線上</span>')

　　　　},

　　　　async: false

　　})

})

ws.open=function(){

　　// 在建立連線後需要做什麼事？

　　// 顯示線上資訊

　　$('#username').html('使用者：'+username+'<span style="float:right;color:green">線上</span>')

}

// 接收到服務端推送的訊息後觸發

ws.onmessage=function(evt){

　　// 獲取服務端推送過來的訊息

　　var dataStr=evt.data;

　　// 將dataStr轉換為json物件

　　var res=JSON.parse(dataStr)

　　// 判斷是否是系統訊息

　　if(res.isSystem){

　　// 系統訊息

　　var names=res.message

　　// 1、好友列表的展示

　　// 2、系統廣播的展示

　　var userlistStr=''

　　var broadcastListStr=''

　　for(let name of names){

　　　　if(name != username) {

　　　　　　userlistStr+="<li class=\"rel-item\"><a onclick='showChat(\""+name+\")'>"+name+"</a></li>"   // 好友列表

　　　　　　broadcastListStr+="<li class=\"rel-item\" style=\"color:#9d9d9d;font-family:宋體\">您的好友"+name+"已上線</li>"   // 系統訊息

　　　　}

　　}

　　// 渲染好友列表和系統廣播

　　$('#userlist').html(userlistStr);

　　$('#broadcastList').html(broadcastListStr)

　　}else{

　　// 不是系統訊息

　　}

}