Web开发中使用WebSocket实现多人在线聊天
Demo:在线聊天室
刚刚接触到了一个web开发中比较有用的一个技术——websocket技术。
实现前端页面的数据进行实时刷新,以前往往会用到轮询,就是通过每隔一段时间就发送一次请求给服务器,服务器再根据数据的更新情况做出响应,当然了,过多的请求也会是服务器造成太大的负荷。而现在有了websocket技术,就不用担心这种情况了。下面就通过一个小小的demo来展示一下websocket的应用吧。
前端JSP:
定义一个输入框和一个按钮;当按钮点击是,触发ws.send方法,向服务器发送消息。
<script>
$(document).ready(function WebSocketTest()
{
var ws;
if ("WebSocket" in window)
{
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket,项目名后的websocket为你在servlet中加的注解
ws = new WebSocket("ws://localhost:8080/项目名/websocket");
ws.onopen = function()
{
alert("连接已打开...");
};
ws.onmessage = function (evt)
{
//收到服务器发来的消息时
var received_msg = evt.data;
$("#show").append("<p>"+received_msg+"</p>");
};
ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
}
else
{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
//点击发送按钮时触发
$("#sendMsg").click(function(){
var Msg=$("#Msg").val();
ws.send(Msg);
$("#Msg").text("");
});
});
</script>
</head>
<body>
<div id="show">
</div>
<table>
<tr>
<td><input type="text" id="Msg" class='form-control'></td>
<td><button id="sendMsg" type="button" class="btn btn-info">发送</button></td>
</tr>
</table>
</body>
后台servlet:
为每个连接到websocket分配一个Session(这个session不是Httpsession,相当于用户的唯一标识,用它进行与指定用户通讯),onMessage接收用户发来的信息,而后sendMessage用来为每一个用户发送信息,从而实现多人在线聊天。
@WebServlet("/WebSocket")
@ServerEndpoint(value = "/websocket") //该注解为JSP页面时用到的websocket
public class WebSocket extends HttpServlet {
private static final long serialVersionUID = 1L;
//concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一用户通信的话,可以使用Map来存放,其中Key可以为用户标识
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<WebSocket>();
//这个session不是Httpsession,相当于用户的唯一标识,用它进行与指定用户通讯
private javax.websocket.Session session=null;
public WebSocket() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//客户端无请求,这里无需响应
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
//客户端连接上websocket的操作
@OnOpen
public void onOpen(Session session){
System.out.println("Session " + session.getId() + " has opened a connection");
this.session=session;
webSocketSet.add(this); //加入set中
}
//接收客户端发来的信息,并将该消息发送给各个用户
@OnMessage
public void onMessage(String message, Session session){
String publicMsg="Message from " + session.getId() + ": " + message;
System.out.println(publicMsg);
try {
sendMessage(publicMsg);
} catch (IOException e) {
// TODO 自动生成的 catch 块
e.printStackTrace();
}
}
//关闭websocket连接
@OnClose
public void onClose(Session session){
webSocketSet.remove(this); //从set中删除
System.out.println("Session " +session.getId()+" has closed!");
}
//发生错误是的操作
@OnError
public void onError(Session session, Throwable t) {
t.printStackTrace();
}
//自定义的sendMessage方法,用来向多个客户端发送信息
public void sendMessage(String msg) throws IOException{
//群发消息
for(WebSocket item: webSocketSet){
try {
item.session.getBasicRemote().sendText(msg);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}
}
效果展示:
打开三个URL,即可模拟多人聊天