使用WebSocket实现简单的在线聊天室
前言：我自已在网上找好了好多 WebSocket 制作 在线聊天室的案列，发现大佬们写得太高深了 我这种新手看不懂，所以就自已尝试写了一个在线简易聊天室 (我只用了js 可以用jq )
话不多说，直接上案列：
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> WebSocket </title> <style> .main{ border: 1px solid red; width: 600px; height: 600px; margin: auto; } #center{ width: 400px; height: 400px; float: left; overflow: auto; border: 1px solid blue; } #right{ width: 196px; height: 400px; float: right; overflow: auto; border: 1px solid blue; } #userCss{ border: 1px solid chartreuse; width: 192px; height: 130px; float: right; text-align: center; } </style> </head> <body> <!--<div>--> <!--<input type="button" id="btnConnection" value="连接" />--> <!--<input type="button" id="btnClose" value="关闭" />--> <!--<input type="button" id="btnSend" value="发送" />--> <!--</div>--> <div class="main"> <h4 style="text-align: center">简 易 聊 天 室</h4> <div id="center"></div> <div id="right"> <p style="text-align: center"> 用户状态<p> </div> <textarea id="txtC" style="width: 400px;height: 130px;"></textarea> <div id="userCss"> 用户名:<input id="user" type="text" style="width:79px"/> <br/> <br/> <button id="btn" style="width:100px;height:50px"> 发 送 </button> <br/> <p></p> <button id="close"> 关 闭 连 接</button> </div> </div> <script type="text/javascript"> var socke; //监听用户框输入的用户名 (失去焦点事件) document.getElementById("user").onblur=function () { var user = document.getElementById("user").value; //当用户输入完用户名并且失去焦点时 自动实现 连接 //ws+ 服务器地址+端口号 +后台url + 用户名 socke = new WebSocket("ws://localhost:8080/ws/"+user); //用户输入完用户名离开输入框 输入框变成禁用 document.getElementById("user").disabled=true; //连接 socke.onopen=function (msg) { //document.getElementById("right").innerHTML+="<p>您的用户名:"+user+" 已连接聊天室</p>"; console.log("已连接成功！"); } socke.onclose=function () { //document.getElementById("right").innerHTML+="<p>您的用户名:"+user+" 已退出聊天室</p>"; } //接收后台信息 socke.onmessage=function (msg) { //取出 标志用户 字段 var userName =msg.data.substring(0,msg.data.indexOf("&")); if(userName=="userKet"){ //取出用户 var userAll = msg.data.substring(msg.data.indexOf("&")+1).split(","); for(var i=0;i<userAll.length;i++) document.getElementById("right").innerHTML+="<p>"+userAll[i]+",已连接聊天室</p>"; } if(userName=="conter"){ var text = msg.data.substring(msg.data.indexOf("&")+1,msg.data.length); document.getElementById("center").innerHTML+="<p>"+text+"</p>"; } } socke.onerror=function () { alert("发生了未知错误，请联系管理员...."); }; }; //发送内容事件 document.getElementById("btn").onclick=function(){ var user = document.getElementById("user").value; if(user==""||user==null){ alert("用户名不能为空"); return false; } if(document.getElementById("txtC").value==""){ alert("请输入内容!!!!"); return false; } //向后台发送用户输入的内容 var text = document.getElementById("txtC").value; socke.send(text); document.getElementById("txtC").value=""; }; //关闭连接 document.getElementById("close").onclick=function () { socke.close(); document.getElementById("user").disabled=false; }; </script> </body> </html>
后台：
package SocketTest; import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.HashMap; import java.util.*; @ServerEndpoint("/ws/{user}") public class SocketDemo { //currentuser 记录现在的用户 private String currentUser; //用集合保存相对应用户 session Id private static Map<String ,String> userName = new HashMap<String,String>(); private static Set<Session> login = new HashSet<>(); //连接执行的方法 @OnOpen public void onOpen(@PathParam("user") String user, Session session){ currentUser = user; //存放所有的连接的用户 userName.put(session.getId(),user); // login.add(session); System.out.println("用户:"+user+" 对应的Id:"+ session.getId()); try { //向前台响应信息 String nameAll =""; String link=""; for (String s:userName.keySet()) { nameAll +=link+userName.get(s); link=","; } for (Session s:login) { s.getBasicRemote().sendText("userKet&"+nameAll); } } catch (IOException e) { e.printStackTrace(); } // return "用户:"+user+" 对应的Id:"+ session.getId(); } //收到信息执行的方法 @OnMessage public void onMessage(String message,Session session ){ //通过键读取值 for (Session s:login) { if(s.isOpen()){ try { //将所有用户的输入内容发送到前端 s.getBasicRemote().sendText("conter&"+currentUser+"说:"+message); } catch (IOException e) { e.printStackTrace(); } } } // return "用户:"+currentUser+"说:"+message; } //连接关闭时执行 @OnClose public void onClose(Session session, CloseReason closeReason){ System.out.println(String.format("Session %s closed because of %s", session.getId(), closeReason)); } //错误时执行 @OnError public void onError(Throwable t){ t.printStackTrace(); } }
演示：
有些bug，尚未修复.....
