1，WebSocket

1.1 WebSocket介紹

WebSocket 是一種網絡通信協議。RFC6455 定義了它的通信標準。

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

HTTP 協議是一種無狀態的、無連接的、單向的應用層協議。它采用了請求/響應模型。通信請求只能由客戶端發起，服務端對請求做出應答處理。

這種通信模型有一個弊端：HTTP 協議無法實現服務器主動向客戶端發起消息。

這種單向請求的特點，注定了如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。大多數 Web 應用程序將通過頻繁的異步 AJAX 請求實現長輪詢。輪詢的效率低，非常浪費資源（因為必須不停連接，或者 HTTP 連接始終打開）。

http協議：

websocket協議：

1.2 websocket協議

本協議有兩部分：握手和數據傳輸。

握手是基于http協議的。

來自客戶端的握手看起來像如下形式：

GET ws://localhost/chat HTTP/1.1 Host: localhost Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Extensions: permessage-deflate Sec-WebSocket-Version: 13

來自服務器的握手看起來像如下形式：

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec-WebSocket-Extensions: permessage-deflate

字段說明：

頭名稱說明

Connection：Upgrade	標識該HTTP請求是一個協議升級請求
Upgrade: WebSocket	協議升級為WebSocket協議
Sec-WebSocket-Version: 13	客戶端支持WebSocket的版本
Sec-WebSocket-Key：	客戶端采用base64編碼的24位隨機字符序列，服務器接受客戶端HTTP協議升級的證明。要求服務端響應一個對應加密的Sec-WebSocket-Accept頭信息作為應答
Sec-WebSocket-Extensions	協議擴展類型

1.3 客戶端（瀏覽器）實現

1.3.1 websocket對象

實現 WebSockets 的 Web 瀏覽器將通過 WebSocket 對象公開所有必需的客戶端功能（主要指支持 Html5 的瀏覽器）。

以下 API 用于創建 WebSocket 對象：

var ws = new WebSocket(url);

參數url格式說明： ws://ip地址:端口號/資源名稱

1.3.2 websocket事件

WebSocket 對象的相關事件

事件事件處理程序描述

open	websocket對象.onopen	連接建立時觸發
message	websocket對象.onmessage	客戶端接收服務端數據時觸發
error	websocket對象.onerror	通信發生錯誤時觸發
close	websocket對象.onclose	連接關閉時觸發

1.3.3 WebSocket方法

WebSocket 對象的相關方法:

方法描述

send()	使用連接發送數據

1.4 服務端實現

Tomcat的7.0.5 版本開始支持WebSocket,并且實現了Java WebSocket規范(JSR356)。

Java WebSocket應用由一系列的WebSocketEndpoint組成。Endpoint 是一個java對象，代表WebSocket鏈接的一端，對于服務端，我們可以視為處理具體WebSocket消息的接口， 就像Servlet之與http請求一樣。

我們可以通過兩種方式定義Endpoint:

• 第一種是編程式， 即繼承類 javax.websocket.Endpoint并實現其方法。

• 第二種是注解式, 即定義一個POJO, 并添加 @ServerEndpoint相關注解。

Endpoint實例在WebSocket握手時創建，并在客戶端與服務端鏈接過程中有效，最后在鏈接關閉時結束。在Endpoint接口中明確定義了與其生命周期相關的方法， 規范實現者確保生命周期的各個階段調用實例的相關方法。生命周期方法如下：

方法含義描述注解

onClose	當會話關閉時調用。	@OnClose
onOpen	當開啟一個新的會話時調用, 該方法是客戶端與服務端握手成功后調用的方法。	@OnOpen
onError	當連接過程中異常時調用。	@OnError

服務端如何接收客戶端發送的數據呢？

通過為 Session 添加 MessageHandler 消息處理器來接收消息，當采用注解方式定義Endpoint時，我們還可以通過 @OnMessage 注解指定接收消息的方法。

服務端如何推送數據給客戶端呢？

發送消息則由 RemoteEndpoint 完成， 其實例由 Session 維護， 根據使用情況， 我們可以通過Session.getBasicRemote 獲取同步消息發送的實例 ， 然后調用其 sendXxx()方法就可以發送消息， 可以通過Session.getAsyncRemote 獲取異步消息發送實例。

服務端代碼：

@ServerEndpoint("/robin") public class ChatEndPoint {private static Set<ChatEndPoint> webSocketSet = new HashSet<>();private Session session;@OnMessagepublic void onMessage(String message, Session session) throws IOException {System.out.println("接收的消息是：" + message);System.out.println(session);//將消息發送給其他的用戶for (Chat chat : webSocketSet) {if(chat != this) {chat.session.getBasicRemote().sendText(message);}}}@OnOpenpublic void onOpen(Session session) {this.session = session;webSocketSet.add(this);}@OnClosepublic void onClose(Session seesion) {System.out.println("連接關閉了。。。");}@OnErrorpublic void onError(Session session,Throwable error) {System.out.println("出錯了。。。。" + error.getMessage());} }

2 基于WebSocket的網頁聊天室

2.1 需求

通過 websocket 實現一個簡易的聊天室功能 。

1）. 登陸聊天室

2）. 登陸之后，進入聊天界面進行聊天

登陸成功后，呈現出以后的效果：

當我們想和李四聊天時就可以點擊 好友列表 中的 李四，效果如下：

接下來就可以進行聊天了，張三 的界面如下：

李四 的界面如下：

2.2 實現流程

2.3 消息格式

• 客戶端 --> 服務端

  {“toName”:“張三”,“message”:“你好”}

• 服務端 --> 客戶端

  • 系統消息格式：{“isSystem”:true,“fromName”:null,“message”：[“李四”,“王五”]}
  • 推送給某一個的消息格式：{“isSystem”:false,“fromName”:“張三”,“message”：“你好”}

2.4 功能實現

2.4.1 創建項目，導入相關jar包的坐標

<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.5.RELEASE</version> </parent><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--devtools熱部署--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional><scope>true</scope></dependency> </dependencies><build><plugins><!-- 打jar包時如果不配置該插件，打出來的jar包沒有清單文件 --><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins> </build>

2.4.2 引入靜態資源文件

2.4.3 引入公共資源

• pojo類

  /*** @version v1.0* @ClassName: Message* @Description: 瀏覽器發送給服務器的websocket數據*/ public class Message {private String toName;private String message;public String getToName() {return toName;}public void setToName(String toName) {this.toName = toName;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;} } /*** @version v1.0* @ClassName: ResultMessage* @Description: 服務器發送給瀏覽器的websocket數據*/ public class ResultMessage {private boolean isSystem;private String fromName;private Object message;//如果是系統消息是數組public boolean getIsSystem() {return isSystem;}public void setIsSystem(boolean isSystem) {this.isSystem = isSystem;}public String getFromName() {return fromName;}public void setFromName(String fromName) {this.fromName = fromName;}public Object getMessage() {return message;}public void setMessage(Object message) {this.message = message;} } /*** @version v1.0* @ClassName: Result* @Description: 用于登陸響應回給瀏覽器的數據*/ public class Result {private boolean flag;private String message;public boolean isFlag() {return flag;}public void setFlag(boolean flag) {this.flag = flag;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;} }

• MessageUtils工具類

  /*** @version v1.0* @ClassName: MessageUtils* @Description: 用來封裝消息的工具類*/ public class MessageUtils {public static String getMessage(boolean isSystemMessage,String fromName, Object message) {try {ResultMessage result = new ResultMessage();result.setIsSystem(isSystemMessage);result.setMessage(message);if(fromName != null) {result.setFromName(fromName);}ObjectMapper mapper = new ObjectMapper();return mapper.writeValueAsString(result);} catch (JsonProcessingException e) {e.printStackTrace();}return null;} }

2.4.4 登陸功能實現

• login.html：使用異步進行請求發送

  $(function() {$("#btn").click(function() {$.get("login",$("#loginForm").serialize(),function(res) {if(res.flag) {//跳轉到 main.html頁面location.href = "main.html";} else {$("#err_msg").html(res.message);}},"json");}); })

• UserController：進行登陸邏輯處理

  @RestController public class UserController {@RequestMapping("/login")public Result login(User user, HttpSession session) {Result result = new Result();if(user != null && "123".equals(user.getPassword())) {result.setFlag(true);//將用戶名存儲到session對象中session.setAttribute("user",user.getUsername());} else {result.setFlag(false);result.setMessage("登陸失敗");}return result;} }

2.4.5 獲取當前登錄的用戶名

• main.html：頁面加載完畢后，發送請求獲取當前登錄的用戶名

  var username; $(function() {$.ajax({url:"getUsername",success:function(res) {username = res;$("#userName").html("用戶：" + res + "<span style='float: right;color: green'>在線</span>");},async:false}); }

• UserController

  在UserController中添加一個getUsername方法，用來從session中獲取當前登錄的用戶名并響應回給瀏覽器

  @RequestMapping("/getUsername") public String getUsername(HttpSession session) {String username = (String) session.getAttribute("user");return username; }

2.5.6 聊天室功能

• 客戶端實現

  在main.html頁面實現前端代碼：

  var toName;var username;function showChat(name) {toName = name;//清除聊天區的數據$("#msgs").html("");//現在聊天對話框$("#chatArea").css("display","inline");//顯示“正在和誰聊天”$("#chatMes").html("正在和 <font face=\"楷體\">"+toName+"</font> 聊天");//切換用戶，需要將聊天記錄渲染到聊天區var storeData = sessionStorage.getItem(toName);if(storeData != null) {$("#msgs").html(storeData);}}$(function() {$.ajax({url:"getUsername",success:function(res) {username = res;//顯示在線信息$("#userName").html(" 用戶："+res+"<span style='float: right;color: green'>在線</span>");},async: false})//創建websocketvar ws;if(window.WebSocket) {ws = new WebSocket("ws://localhost/chat");}//綁定事件ws.onopen = function(evt) {//顯示在線信息$("#userName").html(" 用戶："+username+"<span style='float: right;color: green'>在線</span>");}ws.onmessage = function(evt) {//接收服務器推送的消息var data = evt.data;//將該字符串數據轉換為jsonvar res = JSON.parse(data);//判斷是系統消息還是推送給個人的消息if(res.isSystem) {//系統消息var names = res.message;var userListStr = "";var broadcastStr = "";for(var name of names) {if(name != username) {userListStr += "<li class=\"rel-item\"><a οnclick='showChat(\""+name+"\")'>"+name+"</a></li>";broadcastStr += "<li class=\"rel-item\" style=\"color: #9d9d9d;font-family: 宋體\">您的好友 "+name+" 已上線</li>";}}//將數據渲染到頁面$("#userlist").html(userListStr);$("#broadcastList").html(broadcastStr);} else {//非系統消息var content = res.message;//拼接聊天區展示的數據var str = "<div class=\"msg robot\"><div class=\"msg-left\" worker=\"\"><div class=\"msg-host photo\" style=\"background-image: url(img/avatar/Member002.jpg)\"></div><div class=\"msg-ball\">"+content+"</div></div></div>";//有可能現在不是和指定用戶的聊天框，所以需要進行判斷var storeData = sessionStorage.getItem(res.fromName);if(storeData != null) {storeData += str;} else {storeData = str;}sessionStorage.setItem(res.fromName,storeData);if(toName == res.fromName) {//將數據追加到聊天區$("#msgs").append(str);}}}ws.onclose = function() {//顯示在線信息$("#userName").html(" 用戶："+username+"<span style='float: right;color: red'>離線</span>");}//給發送按鈕綁定點擊事件$("#submit").click(function() {//獲取輸入的內容var data = $("#context_text").val();//將該文本框清空$("#context_text").val("");//拼接消息var str = "<div class=\"msg guest\"><div class=\"msg-right\"><div class=\"msg-host headDefault\"></div><div class=\"msg-ball\">"+data+"</div></div></div>";$("#msgs").append(str);//將聊天記錄進行存儲sessionStoragevar storeData = sessionStorage.getItem(toName);if(storeData != null) {//將此次的內容拼接到storeData中str = storeData + str;}//將消息存儲到sessionStorage中sessionStorage.setItem(toName,str);//定義服務端需要的數據格式var message = {toName:toName,message:data};//將輸入的數據發送給服務器ws.send(JSON.stringify(message));});})

• 服務端代碼實現

  WebSocketConfig 類實現

  開啟 springboot 對websocket的支持

  @Configuration public class WebSocketConfig {@Bean//注入ServerEndpointExporter，自動注冊使用@ServerEndpoint注解的public ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();} }

  ChatEndPoint 類實現

  @ServerEndpoint(value = "/chat",configurator = GetHttpSessionConfigurator.class) @Component public class ChatEndpoint {//用來存儲每一個客戶端對象對應的ChatEndpoint對象private static Map<String,ChatEndpoint> onlineUsers = new ConcurrentHashMap<>();//和某個客戶端連接對象，需要通過他來給客戶端發送數據private Session session;//httpSession中存儲著當前登錄的用戶名private HttpSession httpSession;@OnOpen//連接建立成功調用public void onOpen(Session session, EndpointConfig config) {//需要通知其他的客戶端，將所有的用戶的用戶名發送給客戶端this.session = session;//獲取HttpSession對象HttpSession httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName());//將該httpSession賦值給成員httpSessionthis.httpSession = httpSession;//獲取用戶名String username = (String) httpSession.getAttribute("user");//存儲該鏈接對象onlineUsers.put(username,this);//獲取需要推送的消息String message = MessageUtils.getMessage(true, null, getNames());//廣播給所有的用戶broadcastAllUsers(message);}private void broadcastAllUsers(String message) {try {//遍歷 onlineUsers 集合Set<String> names = onlineUsers.keySet();for (String name : names) {//獲取該用戶對應的ChatEndpoint對象ChatEndpoint chatEndpoint = onlineUsers.get(name);//發送消息chatEndpoint.session.getBasicRemote().sendText(message);}} catch (Exception e) {e.printStackTrace();}}private Set<String> getNames() {return onlineUsers.keySet();}@OnMessage//接收到消息時調用public void onMessage(String message,Session session) {try {//獲取客戶端發送來的數據 {"toName":"張三","message":"你好"}ObjectMapper mapper = new ObjectMapper();Message mess = mapper.readValue(message, Message.class);//獲取當前登錄的用戶名String username = (String) httpSession.getAttribute("user");//拼接推送的消息String data = MessageUtils.getMessage(false, username, mess.getMessage());//將數據推送給指定的客戶端ChatEndpoint chatEndpoint = onlineUsers.get(mess.getToName());chatEndpoint.session.getBasicRemote().sendText(data);} catch (Exception e) {e.printStackTrace();}}@OnClose//連接關閉時調用public void onClose(Session session) {//獲取用戶名String username = (String) httpSession.getAttribute("user");//移除連接對象onlineUsers.remove(username);//獲取需要推送的消息String message = MessageUtils.getMessage(true, null, getNames());//廣播給所有的用戶broadcastAllUsers(message);} }

• GetHttpSessionConfigurator 配置類實現

  public class GetHttpSessionConfigurator extends ServerEndpointConfig.Configurator {@Overridepublic void modifyHandshake(ServerEndpointConfig config, HandshakeRequest request, HandshakeResponse response) {HttpSession httpSession = (HttpSession) request.getHttpSession();config.getUserProperties().put(HttpSession.class.getName(),httpSession);} }

總結

以上是生活随笔為你收集整理的WebSocket网页聊天室的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。