繼續之前的德州撲克話題,上次的DOS界面確實沒法看,我女朋友說這是什么鬼。哈哈,估計只有自己能玩了
這兩天重構了一下界面,基於web服務器和瀏覽器來交互。
服務器和客戶端之間用websocket通信,這種全雙工長連接更方便服務器及時的將整個游戲數據向客戶端推送。
這篇隨筆主要記錄一下做前端界面的時候遇到的一些坑,至於德州撲克游戲的具體邏輯以及AI的邏輯可以查看我前兩篇隨筆
說道web服務器,go語言對這方面封裝的非常好,用起來太爽了。而使用websocket,我們需要用到google提供的一個websocket包。
下載地址:http://code.google.com/p/go.net/websocket
如果訪問不了的話,可以從這個地址下載:https://github.com/SongLiangChen/websocket(我自己下好,打包在github上)
整個重構非常簡單,架設一個web服務器,客戶端和服務器之間建立websocket連接,服務器首先將初始化的游戲數據打包成XML推送給客戶端,客戶端通過JavaScript解析之后將數據展示。之后服務器根據游戲邏輯來等待客戶端輸入數據,例如下注之類。然后進行下一步計算,並且重新將數據推送給客戶端展現。
過程中主要遇到的坑就是JavaScript解析XML的時候,由於各個瀏覽器之間的不同而導致很多兼容性的問題。
比如chrome不允許跨域訪問,同時它又沒有實現像IE類似的loadXml()或者load()函數。所以只能通過http請求向服務器索要數據。
function loadXMLStr(xmlFile){ try{ xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); }catch(e){ xmlDoc=document.implementation.createDocument("","",null); } try{ xmlDoc.async=false; xmlDoc.loadXML(xmlFile); }catch(e){ var xmlhttp = new window.XMLHttpRequest(); xmlhttp.overrideMimeType("text/xml; charset=utf-8"); xmlhttp.open("GET","xml",false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; } return xmlDoc; };
代碼中紅色標注的那句話,它的作用是標注請求的數據是一種xml文本資源,並且可以通知服務器瀏覽器使用的編碼方式。如果沒有的話,你將會發現responseText能夠正確返回數據,但是responseXML將返回NULL。
現在我們chrome中運行這段JS代碼, 服務器就會收到一個"xml"(名字可以自己定)的請求。我們只要設置一下路由,收到"xml"請求的時候,將數據發送給客戶端就可以啦
func GetXml(w http.ResponseWriter, r *http.Request){ fmt.Println("getXml ",string(desk.GetXmlData())) w.Write(desk.GetXmlData()) } func main(){ http.Handle("/con", websocket.Handler(StartGame)) http.HandleFunc("/", Hello) http.HandleFunc("/xml", GetXml) if err := http.ListenAndServe(":8080", nil); err != nil{ fmt.Println("LS Fail") } }
在go語言中,這種事情都不是事情,你可以看到,真的相當簡單。
運行服務器,瀏覽器通過8080端口訪問本地就可以玩耍啦
代碼開源在github上,歡迎交流:https://github.com/SongLiangChen/AITexasHoldemForWeb
運行時候請將html文件和exe文件放在同一個目錄下