| 123456789101112131415161718192021222324252627282930313233343536373839404142 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <style type="text/css">
- #box { overflow: auto;width: 500px; height: 300px; border: 1px solid #dcdcdc; }
- #txtInput { width: 430px; }
- </style>
- <!-- <script src="http://lt.1473.cn/socket.io/socket.io.js" type="text/javascript"></script>-->
- <script src="http://127.0.0.1:888/socket.io/socket.io.js" type="text/javascript"></script>
- <script type="text/javascript">
- //TODO 这里是负责建立热线的代码
- var socket = io.connect('http://127.0.0.1:888');
- //var socket = io.connect('http://lt.1473.cn');
- // TODO 这里负责接收服务端信息的代码
- socket.on('bcast', function (msg) {
- document.getElementById("box").innerHTML+=msg;
- });
- function sendMsg() {
- var input = document.getElementById('txtInput');
- var str = input.value;//获取文本框中的值
- msgbox(str);//客户端信息追加到div
- //发送到服务端
- socket.emit('msg', { msg: str });//向服务端发送消息
- //console.log('[client]' + str);
- input.value = "";
- input.focus(); //客户端操作
- }
- //输出信息到div
- function msgbox(str) {
- var box = document.getElementById('box');
- box.innerHTML += str + '<br>';
- }
- </script>
- </head>
- <body>
- <h2>Chat Client</h2>
- <div id='box' ></div>
- <input type='text' id='txtInput' ><input type='button' value='SEND' onclick='sendMsg();'>
- </body>
- </html>
|