如何利用WebSocket实现网页版聊天室

花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段“看似弯曲”的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹。这个小demo看似简单,但是这一路走来自己也是花了不少心思才将其完成,今天就和大家一起分享一下。 刚刚接手这个任务时,我就想能不能使用Node.js来编写聊天室的服务器端,而后才发现这样做却存在“跨域问题”,因为你的前台是部署在Tomcat服务器上的,所以前台和后台的数据无法进行直接的交互,虽然可以间接的进行交互但是却不容易,在此不建议大家采用此种方法,可直接采用Java+html实现网页版聊天室。我将首先介绍客户端的构造而后介绍服务器端: 客户端

【1】 页面的编写(使用HTML编写)

<body> <div> <center><h1>欢迎光临聊天室 </h1></center> <div></div> 昵称: <input type="text"/> 内容: <input type="text"/> <button>发送</button> <button>退出聊天室</button> </div> </body>

说明:

在此我首先放置了一个ID 名为message的div用来显示存放的消息

然后我放置了两个input标签:一个存放昵称,另一个存放用户要发出去的昵称

最后设置两个按钮用来发送消息和退出聊天
【2】页面的脚本编写

<script type="text/javascript"> var websocket = null; //判断当前浏览器是否支持WebSocket if(\'WebSocket\' in window){ websocket = new 地址格式是:主机名+项目名+客户端注明的名称 WebSocket("ws://localhost:8080/Chat_01/websocket"); } else{ alert(\'您的浏览器不支持 websocket!\') } //连接发生错误的回调方法 websocket.onerror = function(){ setMessageInnerHTML("error"); }; //连接成功建立的回调方法 websocket.onopen = function(event){ alert("链接成功,欢迎加入聊天室!"); } //接收到消息的回调方法 websocket.onmessage = function(event){ setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function(){ var username=document.getElementById(\'username\').value; setMessageInnerHTML(getNowFormatDate()+" "+username+" 退出了聊天室!"); } //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function(){ websocket.close(); } //将消息显示在网页上 function setMessageInnerHTML(innerHTML){ document.getElementById(\'message\').innerHTML += innerHTML + \'\'; } //关闭连接 function closeWebSocket(){ websocket.close(); } //发送消息 function send(){ var username=document.getElementById(\'username\').value; var message = document.getElementById(\'text\').value; websocket.send(getNowFormatDate()+" "+username+"说: "+message+"<br/>"); //发送消息后,发送消息框自动清空 document.getElementById(\'text\').value=""; } function getNowFormatDate() { var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) myDate.getHours(); //获取当前小时数(0-23) myDate.getMinutes(); //获取当前分钟数(0-59) myDate.getSeconds(); //获取当前秒数(0-59) myDate.getMilliseconds(); //获取当前毫秒数(0-999) myDate.toLocaleDateString(); //获取当前日期 var mytime=myDate.toLocaleTimeString(); //获取当前时间 return myDate.toLocaleString( ); //获取日期与时间 } </script>

说明:以上几个方法例如onclose,onmessage均是websocket自带的方法,大家只需要在websocket文档上查看各个函数是什么功能。

服务器端 import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; //该注解用来指定一个URI,客户端可以通过这个URI来连接到WebSocket。类似Servlet的注解mapping。无需在web.xml中配置。 @ServerEndpoint("/websocket") public class MyWebSocket { // 静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。 private static int onlineCount = 0; // concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识 private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>(); // 与某个客户端的连接会话,需要通过它来给客户端发送数据 private Session session; @OnOpen public void onOpen(Session session) { this.session = session; webSocketSet.add(this); // 加入set中 addOnlineCount(); // 在线数加1 System.out.println("有新连接加入!当前在线人数为" + getOnlineCount()); } /** * 连接关闭调用的方法 */ @OnClose public void onClose() { webSocketSet.remove(this); // 从set中删除 subOnlineCount(); // 在线数减1 System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount()); } @OnMessage public void onMessage(String message, Session session) { System.out.println("来自客户端的消息:" + message); // 群发消息 for (MyWebSocket item : webSocketSet) { try { item.sendMessage(message); } catch (IOException e) { e.printStackTrace(); continue; } } } @OnError public void onError(Session session, Throwable error) { System.out.println("发生错误"); error.printStackTrace(); } public void sendMessage(String message) throws IOException { this.session.getBasicRemote().sendText(message); // this.session.getAsyncRemote().sendText(message); } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { MyWebSocket.onlineCount++; } public static synchronized void subOnlineCount() { MyWebSocket.onlineCount--; } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwjfdz.html