<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>websocket聊天室</title> <style type="text/css"> #chat { text-align: left; width: 600px; height: 500px; width: 600px; } #up { text-align: left; width: 100%; height: 400px; border: 1px solid green; OVERFLOW-Y: auto; } #down { text-align: left; height: 100px; width: 100%; } </style> </head> <body> <h2>基于HTML5的聊天室</h2> <div> <div> <div></div> <div> <textarea type="text"></textarea> </div> </div> <input type="button" value="连接"> <input type="button" value="发送" disabled="disabled" title="Ctrl+Enter发送"> </div> </body> <script type="text/javascript"> var socket; var receive_text = document.getElementById("up"); var send_text = document.getElementById("send"); function addText(msg) { receive_text.innerHTML += "<br/>" + msg; receive_text.scrollTop = receive_text.scrollHeight; } var chat = function(obj) { obj.disabled = "disabled"; socket = new WebSocket('ws://localhost:8080/chatroom/chat'); receive_text.innerHTML += "<font color=green>正在连接服务器……</font>"; //打开Socket socket.onopen = function(event) { addText("<font color=green>连接成功！</font>"); document.getElementById("send_btn").disabled = false; send_text.focus(); document.onkeydown = function(event) { if (event.keyCode == 13 && event.ctrlKey) { send(); } } }; socket.onmessage = function(event) { addText(event.data); }; socket.onclose = function(event) { addText("<font color=red>连接断开！</font>"); obj.disabled = ""; }; if (socket == null) { addText("<font color=red>连接失败！</font>"); } }; var send = function(obj) { if (send_text.value == "") { return; } socket.send(send_text.value); send_text.value = ""; send_text.focus(); } </script> </html>
这样一个简单的实时聊天页面就做好了，接下来将项目部署到Tomcat 7.0服务器，并开启服务器就可以实现聊天了
结果展示：
1.在地址栏输入服务器地址：
:8080/chatroom/index.jsp
点击连接服务器结果如下：
2.分别在两个不同的浏览器打开并互相发送信息（我这里用谷歌和火狐）结果如下：
以上所述是小编给大家介绍的HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: