WebSocket实现简单聊天室(java web)
2018-03-17 23:00
609 查看
WebSocket实现简单聊天室
WebSocket简介:WebSocket其实是属于H5规范的一部分,它允许通过JavaScript建立和服务器的连接,从而实现服务器将数据推送给服务器。和传统TCP协议相比,WebSocket的好处在于实现了全双工通信(不需要客户端发出请求,服务器就可以直接向服务端发送数据),现在大部分的浏览器(FireFox,Chrome,Safari,Opera等)都支持该技术,Tomcat8也对于该技术有着很好的实现。
基于WebSocket实现多人聊天的java类
·用@ServerEndpoint来修饰java类
·@OnOpen修饰建立连接时的方法
@OnOpen public void start(Session session) throws IOException { this.session = session; }
·@OnClose修饰断开连接时的方法
@OnClose public void end() { clientSet.remove(name, this); String message = String.format("【%s %s】", name, "离开了聊天室!"); // 发送消息 broadcast(message); }·@OnMessage修饰接受消息时的方法
@OnMessage public void print(String msg) { if (first) { name = msg; clientSet.put(name, this); String message = String.format("【%s %s】", name, "加入了聊天室!"); // 发送消息 broadcast(message); first = false; } else { broadcast("【" + name + "】" + ":" + msg); } }·@OnError修饰出错时的方法
@OnError public void onError(Throwable t) throws Throwable { System.out.println("WebSocket服务端错误 " + t); }
·broadcast方法——向所有客户端发送消息
public void broadcast(String msg) { // 遍历服务器关联的所有客户端 Chat client = null; for (String nickname : clientSet.keySet()) { try { client = (Chat) clientSet.get(nickname); synchronized (client) { // 发送消息 client.session.getBasicRemote().sendText(msg); } } catch (IOException e) { System.out.println("聊天错误,向客户端 " + client + " 发送消息出现错误。"); clientSet.remove(name, client); try { client.session.close(); } catch (IOException e1) { } String message = String.format("【%s %s】", client.name, "已经被断开了连接。"); broadcast(message); } } }
需要注意的是:这里的JAVA类不是真正的WebSocket服务端,Tomcat会调用这个类的方法作为WebSocket服务端,而且Tomcat会为每个客户端创建一个类对象。
·chatRoom.html---聊天室页面
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>简单聊天室</title> <script type="text/javascript"> // 创建WebSocket对象 var webSocket = new WebSocket("ws://localhost:8080/WebSocket1/chat"); var sendMsg = function() { var inputElement = document.getElementById('msg'); if (inputElement.value == '') alert("输入内容不为空"); else { // 发送消息 webSocket.send(inputElement.value); // 清空单行文本框 inputElement.value = ""; } } var send = function(event) { //设置回车发送消息 if (event.keyCode == 13) { sendMsg(); } }; webSocket.onopen = function() { n = prompt('请给自己取一个昵称:'); if (n != '' && n != null) webSocket.send(n); else //设置游客登录 webSocket.send("游客" + Math.random() * 100000000000000000); document.getElementById('msg').onkeydown = send; document.getElementById('sendBn').onclick = sendMsg; }; // 为onmessage事件绑定监听器,接收消息 webSocket.onmessage = function(event) { var show = document.getElementById('show') // 接收、并显示消息 show.innerHTML += new Date() + "<br/>" + event.data + "<br/>"; //让聊天框滚动条始终显示新消息 show.scrollTop = show.scrollHeight; } webSocket.onclose = function() { document.getElementById('msg').onkeydown = null; document.getElementById('sendBn').onclick = null; Console.log('WebSocket已经被关闭。'); }; </script> </head> <body> <div style="width: 600px; height: 240px; overflow-y: auto; border: 1px solid #333;" id="show"></div> <input type="text" size="80" id="msg" name="msg" placeholder="输入聊天内容" /> <input type="button" value="发送" id="sendBn" name="sendBn" /> </body> </html>
运行结果
这个简单的聊天室就做到这里,还有很多东西可以继续完善,比如显示聊天室内在线的用户和悄悄话功能以及UI等等,虽然很简单,但是基本的聊天功能还是可以实现的
项目代码https://github.com/homewin21/WebSocket
相关文章推荐
- WebSocket实现简单的web聊天室
- HTML5 WebSocket(Client) + JavaWeb(Server)实现简单的聊天室功能
- 如何用WebSocket实现一个简单的聊天室以及单聊功能
- HTML5 WebSocket(Client) + JavaWeb(Server) 实现简单的聊天室功能
- 基于HTML5和Tomcat WebSocketServlet的聊天室简单实现
- 使用websocket的组件socket.io实现最简单的聊天室功能。
- “服务器推”之websocket实现之简单聊天室
- HTML5和Tomcat7 WebSocketServlet easyui的聊天室简单实现
- Netty结合WebSocket实现简单网页聊天室
- WebSocket实现简单的聊天室
- 用Websocket实现的最简单的聊天室功能
- WebSocket jfinal 实现简单的聊天室功能
- java web利用mvc结构实现简单聊天室功能
- 使用Vert.x实现一个简单的websocket聊天室
- WebSocket实现简单的web聊天室
- websocket实现简单的聊天室
- java WebSocket实现简单的聊天室(包括群发和点对点聊天)
- HTML5 WebSocket(Client) + JavaWeb(Server) 实现简单的聊天室功能
- 基于HTML5和Tomcat WebSocketServlet的聊天室简单实现
- WebSocket入门:实现简单聊天室