當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

websocket之二：WebSocket编程入门

發布時間：2025/5/22 编程问答 55 豆豆

生活随笔收集整理的這篇文章主要介紹了 websocket之二：WebSocket编程入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、WebSocket客戶端

websocket允許通過JavaScript建立與遠程服務器的連接，從而實現客戶端與服務器間雙向的通信。在websocket中有兩個方法：　　
　　　　1、send() 向遠程服務器發送數據
　　　　2、close() 關閉該websocket鏈接
　　websocket同時還定義了幾個監聽函數　　　　
　　　　1、onopen 當網絡連接建立時觸發該事件
　　　　2、onerror 當網絡發生錯誤時觸發該事件
　　　　3、onclose 當websocket被關閉時觸發該事件
　　　　4、onmessage 當websocket接收到服務器發來的消息的時觸發的事件，也是通信中最重要的一個監聽事件。msg.data
　　websocket還定義了一個readyState屬性，這個屬性可以返回websocket所處的狀態：
　　　　1、CONNECTING(0) websocket正嘗試與服務器建立連接
　　　　2、OPEN(1) websocket與服務器已經建立連接
　　　　3、CLOSING(2) websocket正在關閉與服務器的連接
　　　　4、CLOSED(3) websocket已經關閉了與服務器的連接

　　websocket的url開頭是ws，如果需要ssl加密可以使用wss，當我們調用websocket的構造方法構建一個websocket對象（new WebSocket(url)）的之后，就可以進行即時通信了。

<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width" /><title>WebSocket 客戶端</title></head><body><div><input type="button" id="btnConnection" value="連接" /><input type="button" id="btnClose" value="關閉" /><input type="button" id="btnSend" value="發送" /></div><script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var socket;if(typeof(WebSocket) == "undefined") {alert("您的瀏覽器不支持WebSocket");//return; }$("#btnConnection").click(function() {//實現化WebSocket對象，指定要連接的服務器地址與端口 socket = new WebSocket("ws://127.0.0.1:8080/spring-websocket-test/demo2/duanxz");//打開事件 socket.onopen = function() {alert("Socket 已打開");//socket.send("這是來自客戶端的消息" + location.href + new Date()); };//獲得消息事件 socket.onmessage = function(msg) {alert(msg.data);};//關閉事件 socket.onclose = function() {alert("Socket已關閉");};//發生了錯誤事件 socket.onerror = function() {alert("發生了錯誤");}});//發送消息 $("#btnSend").click(function() {socket.send("這是來自客戶端的消息" + location.href + new Date());});//關閉 $("#btnClose").click(function() {socket.close();});</script></body></html>

二、WebSocket服務器端

JSR356定義了WebSocket的規范，Tomcat7中實現了該標準。JSR356 的 WebSocket 規范使用 javax.websocket.*的 API，可以將一個普通 Java 對象（POJO）使用 @ServerEndpoint 注釋作為 WebSocket 服務器的端點。

package org.springframework.samples.websocket.echo2;import java.io.IOException;import javax.websocket.CloseReason; 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;@ServerEndpoint("/push") public class EchoEndpoint {@OnOpenpublic void onOpen(Session session) throws IOException {// 以下代碼省略... }@OnMessagepublic String onMessage(String message) {// 以下代碼省略...return null;}@Message(maxMessageSize = 6)public void receiveMessage(String s) {// 以下代碼省略... }@OnErrorpublic void onError(Throwable t) {// 以下代碼省略... }@OnClosepublic void onClose(Session session, CloseReason reason) {// 以下代碼省略... }}

上面簡潔代碼即建立了一個WebSocket的服務端，@ServerEndpoint("/push")的annotation注釋端點表示將WebSocket服務端運行在ws://[Server端IP或域名]:[Server端口]/項目/push的訪問端點，客戶端瀏覽器已經可以對WebSocket客戶端API發起HTTP長連接了。
使用ServerEndpoint注釋的類必須有一個公共的無參數構造函數，

@OnMessage注解的Java方法用于接收傳入的WebSocket信息，這個信息可以是文本格式，也可以是二進制格式。
@OnOpen注解的java方法用于在這個端點一個新的連接建立時被調用。參數提供了連接的另一端的更多細節。Session表明兩個WebSocket端點對話連接的另一端，可以理解為類似HTTPSession的概念。
@OnClose注解的java方法用于在連接被終止時調用。參數closeReason可封裝更多細節，如為什么一個WebSocket連接關閉。
更高級的定制如@Message注釋，MaxMessageSize屬性可以被用來定義消息字節最大限制，在示例程序中，如果超過6個字節的信息被接收，就報告錯誤和連接關閉。

三、常見狀態碼

任何一端發送關閉幀給對方，即可關閉連接。關閉連接時通常都帶有關閉連接的狀態碼(status code)。常見狀態碼的含義如下：

1000 連接正常關閉
1001 端點離線，例如服務器down，或者瀏覽器已經離開此頁面
1002 端點因為協議錯誤而中斷連接
1003 端點因為受到不能接受的數據類型而中斷連接
1004 保留
1005 保留, 用于提示應用未收到連接關閉的狀態碼
1006 端點異常關閉
1007 端點收到的數據幀類型不一致而導致連接關閉
1008 數據違例而關閉連接
1009 收到的消息數據太大而關閉連接
1010 客戶端因為服務器未協商擴展而關閉
1011 服務器因為遭遇異常而關閉連接
1015 TLS握手失敗關閉連接

四、部署

如果在與Web服務器集成的情況下使用使用WebSocket，通常需要Web服務器進行額外配置，具體可以參見各種Web服務器的配置方案，此處不再贅述：

Apache：http://httpd.apache.org/docs/2.4/mod/mod_proxy_wstunnel.html。?
Nginx：https://www.nginx.com/blog/websocket-nginx/。

既然WebSocket是HTML5新增的特性，那么在使用時我們就要考慮瀏覽器舊版本兼容的問題，這也是Comet方案盡管存在各種問題，但仍舊被采用的原因。

五、示例

package org.springframework.samples.websocket.echo2;import javax.websocket.CloseReason; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint;import org.springframework.web.socket.server.standard.SpringConfigurator;//ws://127.0.0.1:8080/project/ws/張三 @ServerEndpoint(value = "/demo2/{user}", configurator = SpringConfigurator.class) public class WSServer {private String currentUser;// 連接打開時執行 @OnOpenpublic void onOpen(@PathParam("user") String user, Session session) {currentUser = user;System.out.println("Connected ... " + session.getId());}// 收到消息時執行 @OnMessagepublic String onMessage(String message, Session session) {System.out.println(currentUser + "：" + message);return currentUser + "：" + message;}// 連接關閉時執行 @OnClosepublic void onClose(Session session, CloseReason closeReason) {System.out.println(String.format("Session %s closed because of %s", session.getId(), closeReason));}// 連接錯誤時執行 @OnErrorpublic void onError(Throwable t) {t.printStackTrace();} }

url中的字符張三是的路徑參數，響應請求的方法將自動映射。

六、測試運行

總結

以上是生活随笔為你收集整理的websocket之二：WebSocket编程入门的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： js立即执行函数: (function
下一篇： python中的is