如何利用WebSocket实现网页版聊天室
2021-03-10 03:28
阅读:388
花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段“看似弯曲”的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹。这个小demo看似简单,但是这一路走来自己也是花了不少心思才将其完成,今天就和大家一起分享一下。
刚刚接手这个任务时,我就想能不能使用Node.js来编写聊天室的服务器端,而后才发现这样做却存在“跨域问题”,因为你的前台是部署在Tomcat服务器上的,所以前台和后台的数据无法进行直接的交互,虽然可以间接的进行交互但是却不容易,在此不建议大家采用此种方法,可直接采用Java+html实现网页版聊天室。我将首先介绍客户端的构造而后介绍服务器端:
客户端
【1】 页面的编写(使用HTML编写)
欢迎光临聊天室
昵称:
内容:
说明:
- 在此我首先放置了一个ID 名为message的div用来显示存放的消息
- 然后我放置了两个input标签:一个存放昵称,另一个存放用户要发出去的昵称
- 最后设置两个按钮用来发送消息和退出聊天
【2】页面的脚本编写
说明:以上几个方法例如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 webSocketSet = new CopyOnWriteArraySet();
// 与某个客户端的连接会话,需要通过它来给客户端发送数据
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--;
}
}
程序中我对重要的部门都标记了注释,相信大家只要稍微看过就可以看懂,在此我就不一一赘述了,大家如果在运行过程中有问题的可以在文章下方进行评论,我们可以一起讨论一下。最后我附上整个项目文件的位置以供小伙伴们下载运行。
百度网盘下载地址:链接:http://pan.baidu.com/s/1pLQbeDP 密码:t2vp
文章来自:搜素材网的编程语言模块,转载请注明文章出处。
文章标题:如何利用WebSocket实现网页版聊天室
文章链接:http://soscw.com/index.php/essay/62578.html
文章标题:如何利用WebSocket实现网页版聊天室
文章链接:http://soscw.com/index.php/essay/62578.html
评论
亲,登录后才可以留言!