123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <html>
- <head>
- <title>Golang Chat</title>
- <script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
- <meta charset="UTF-8" />
- <script type="text/javascript">
- $(function() {
- function getUrlParam(name)
- {
- var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
- var r = window.location.search.substr(1).match(reg); //匹配目标参数
- if (r!=null) return unescape(r[2]); return null; //返回参数值
- }
- var conn;
- var msg = $("#msg");
- var log = $("#log");
- uid=getUrlParam("uid");
- to_uid=getUrlParam("to_uid");
- function appendLog(msg) {
- var d = log[0]
- var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
- msg.appendTo(log)
- if (doScroll) {
- d.scrollTop = d.scrollHeight - d.clientHeight;
- }
- }
- $("#form").submit(function() {
- if (!conn) {
- return false;
- }
- if (!msg.val()) {
- return false;
- }
- var json = {"sender":uid,"recipient":to_uid,"content":msg.val()}; //创建对象;
- var jsonStr = JSON.stringify(json); //转为JSON字符串
- conn.send(jsonStr);
- msg.val("");
- return false
- });
- if (window["WebSocket"]) {
- conn = new WebSocket("ws://localhost:8000/ws?uid="+uid+"&to_uid="+to_uid);
- conn.onclose = function(evt) {
- appendLog($("<div><b>Connection Closed.</b></div>"))
- }
- conn.onmessage = function(evt) {
- appendLog($("<div/>").text(evt.data))
- }
- } else {
- appendLog($("<div><b>WebSockets Not Support.</b></div>"))
- }
- });
- </script>
- <style type="text/css">
- html {
- overflow: hidden;
- }
- body {
- overflow: hidden;
- padding: 0;
- margin: 0;
- width: 100%;
- height: 100%;
- background: gray;
- }
- #log {
- background: white;
- margin: 0;
- padding: 0.5em 0.5em 0.5em 0.5em;
- position: absolute;
- top: 0.5em;
- left: 0.5em;
- right: 0.5em;
- bottom: 3em;
- overflow: auto;
- }
- #form {
- padding: 0 0.5em 0 0.5em;
- margin: 0;
- position: absolute;
- bottom: 1em;
- left: 0px;
- width: 100%;
- overflow: hidden;
- }
- </style>
- </head>
- <body>
- <div id="log"></div>
- <form id="form">
- <input type="submit" value="发送" />
- <input type="text" id="msg" size="64"/>
- </form>
- </body>
- </html>
|