資料參考：
騰訊課堂：基於Java的WebSocket聊天室實現https://ke.qq.com/course/284915
用WebSocket實現的非常優秀的在線聊天網站案例http://www.blue-zero.com/chat/
1，什麼是websocket
websocket是一種傳輸網絡協議，它相對於http協議，客戶端和服務器只需要建立一次連接（專業名稱稱之握手），客戶端和服務器就可以相互通信，（也就是服務器可以主動向客戶端發送消息），而我們以前一直用的http協議，是隻能客戶端發送請求給服務器，服務器才能響應客戶端數據。
http協議
websocket協議
2，websocket的使用場景
用於在線客戶，社交聊天，視頻彈幕，位置服務，在線教育，股票基金實時報價和體育實況實時更新等等高實時場景。
3，使用websocket實現聊天室。
①實現原理圖
②編寫服務器端代碼
package server;
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;
//聲明websocket的名字爲chat
@ServerEndpoint("/chat")
/**
* WebSocket服務器端
*/
public class ChatServer {
//Session對象
private Session session;
//初始化集合，用來存放每個客戶端對應的服務器端的WebSocket對象，線程安全
private static CopyOnWriteArraySet<ChatServer> servers = new CopyOnWriteArraySet<ChatServer>();
/**
* 當客戶端連接成功後調用的方法
* @param session
*/
@OnOpen
public void onOpen(Session session) {
this.session=session;
servers.add(this);
System.out.println("連接已經建立："+session.getId());
}
/**
* 接收客戶端發送的消息
* @param msg
*/
@OnMessage
public void onMessage(String msg) {
System.out.println("客戶端發送的數據："+msg);
try {
//向客戶端發送數據
//this.session.getBasicRemote().sendText(msg);
for (ChatServer chatServer : servers) {
//向客戶端發送數據
chatServer.session.getBasicRemote().sendText(msg);
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* 發生錯誤時調用的方法
* @param error
*/
@OnError
public void onError(Throwable error) {
System.out.println("發生錯誤");
error.printStackTrace();
}
/**
* 關閉連接調用的方法
*/
@OnClose
public void onClose() {
servers.remove(this);
System.out.println("連接關閉");
}
}
③客戶端代碼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>websocket聊天室demo</title>
</head>
<body>
<div id="main">
<div id="message">
</div>
<div id="inputArea">
暱稱：<input id="nick"/>
內容：<input id="content"/>
<input type="button" id="send" value="發送"/>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
//聲明WebSocket對象
var ws = null;
if(WebSocket){
//建立連接
ws = new WebSocket("ws://localhost:8080/chatroom/chat");
}else{
alert("瀏覽器不支持WebSocket!");
}
//與服務器建立連接後執行的方法
ws.onopen = function(){
//向服務器端發送消息
ws.send("歡迎新人加入聊天室");
}
//接收服務器端發送的數據後執行的方法
ws.onmessage=function(event){
//顯示接收數據
showMessage(event.data);
}
//將消息顯示到頁面中
function showMessage(msg){
var html=$("#message").html();
html=html+"<p>"+msg+"</p>";
$("#message").html(html);
}
//發送按鈕單擊事件
$("#send").click(function(){
var nick = $("#nick").val();
var content=$("#content").val();
if(nick=="" || content == ""){
alter("請輸入暱稱或內容");
return;
}
ws.send(nick+"：<br/>"+content);
});
</script>
</body>
</html>