ussocket.htm 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. #box { overflow: auto;width: 500px; height: 300px; border: 1px solid #dcdcdc; }
  7. #txtInput { width: 430px; }
  8. </style>
  9. <!-- <script src="http://lt.1473.cn/socket.io/socket.io.js" type="text/javascript"></script>-->
  10. <script src="http://127.0.0.1:888/socket.io/socket.io.js" type="text/javascript"></script>
  11. <script type="text/javascript">
  12. //TODO 这里是负责建立热线的代码
  13. var socket = io.connect('http://127.0.0.1:888');
  14. //var socket = io.connect('http://lt.1473.cn');
  15. // TODO 这里负责接收和传送消息的代码
  16. socket.on('join', function (msg) {
  17. alert(msg);
  18. });
  19. function sendMsg() {
  20. var input = document.getElementById('txtInput');
  21. var str = input.value;//获取文本框中的值
  22. msgbox(str);//客户端信息追加到div
  23. //发送到服务端
  24. socket.emit('msg', { msg: str });//服务端发送消息
  25. //console.log('[client]' + str);
  26. input.value = ""; input.focus(); //客户端操作
  27. }
  28. //输出信息到div
  29. function msgbox(str) {
  30. var box = document.getElementById('box');
  31. box.innerHTML += str + '<br>';
  32. }
  33. </script>
  34. </head>
  35. <body>
  36. <h2>Chat Client</h2>
  37. <div id='box' ></div>
  38. <input type='text' id='txtInput' ><input type='button' value='SEND' onclick='sendMsg();'>
  39. </body>
  40. </html>