大家可以对比一下，ajax版的网页聊天室和webSocket版的网页聊天室有什么区别和不同点。
先打开我的火狐浏览器，再依次打开我的Microsoft Edge浏览器和IE11浏览器，
在火狐浏览器中发送消息给服务器端，如下：
扫描二维码关注公众号，回复：
12719017 查看本文章
前端页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5学习(webSocket)</title>
<link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
<h3>html5学习(webSocket)</h3>
<input type="text" id="chatMessage" />
<input type="button" style="width: 100px;" value="发送" onclick="sendMsg();" />
<input type="button" style="width: 100px;" value="关闭" onclick="closeMsg();" />
<div id="show" style="height: 600px;overflow: auto;">
</div>
</body>
<script type="text/javascript">
function $(elementId) {
return document.getElementById(elementId);
}
var websocket = null;
if ('websocket' in window) {
console.log(window);
//注意：测试的时候，地址也要写http://localhost:8888/ 不能写http://127.0.0.1:8888/
websocket = new WebSocket("ws://localhost:8888/html5Demo/MsgWebSocket");
} else {
$('show').innerHTML += "警告!您的浏览器不支持webSocket!";
}
//打开websocket连接
websocket.onopen = function() {
// WebSocket已连接上，使用send()方法发送数据
var str1 = 'WebSocket已连接上....模拟聊天室';
var str2 = '<font style="color: blue; font-size: 20px;">' + str1 + '</font><br />';
$('show').innerHTML += str2;
};
//向服务器端发送信息
function sendMsg() {
var msg = $('chatMessage').value;
$('chatMessage').value = '';
websocket.send(msg);
}
//接收服务端推送过来的消息
websocket.onmessage = function(evt) {
var serverReturnData = evt.data;
console.log(serverReturnData);
document.getElementById('show').innerHTML += "收到消息：" + serverReturnData
+ "<br />";
};
//关闭
function closeMsg() {
websocket.send("有用户掉线了！！");
websocket.close();
}
//浏览器关闭前，回调函数，防止服务器端抛异常
window.onbeforeunload = function() {
websocket.close();
}
</script>
</html>后端java代码
package com.test;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.OnOpen;
import javax.websocket.OnMessage;
import javax.websocket.OnClose;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint(value = "/MsgWebSocket")
public class MsgWebSocket {
// 当每一个连接来的时候都会实例化一个MsgWebSocket
private static CopyOnWriteArraySet<MsgWebSocket> webSockets = new CopyOnWriteArraySet<>();
// 与任何一个客户端的连接都有会话
private Session session;
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSockets.add(this);
System.out.println("***有新用户上线***");
// sendMsgToOthers("有新用户上线");
sendMsgToOthers("我上线啦....");
}
@OnClose
public void onClose(Session session) {
this.session = session;
webSockets.remove(this);
}
// 给其他所有用户发送消息，不给自己发
private void sendMsgToOthers(String message) {
for (MsgWebSocket item : webSockets) {
System.out.println("***" + this.session + "***" + item.session.getId());
// 不给自己发送(谁发的消息，就不给谁转发)
// if (this.session.getBasicRemote().equals(item.session.getBasicRemote())) {
// continue;
// }
// 封装一个给每个session发送消息的方法
item.sendMessage(this.session.getId() + "说：" + message);
}
}
private void sendMessage(String message) {
try {
this.session.getBasicRemote().sendText(message);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/*
* 当服务器接收到消息的时候，做消息转发
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("来自客户端的消息：" + message);
// 当有消息来临时，给除去自己外的所有人发送消息
sendMsgToOthers(message);
}
}
大家可以根据我的案例，自己测试一下！
以下几篇文章也可以参考