ホームページ > 記事 > ウェブフロントエンド > WebSocketの使い方を詳しく解説

WebSocketの使い方を詳しく解説

php中世界最好的语言オリジナル: 2018-03-14 15:17:493013ブラウズ

今回はWebSocketの使い方について詳しく解説していきます。WebSocketを使用する際の注意点を実際の事例を交えて見ていきましょう。

WebSocket について初めて知る
1: WebSocket を理解する
WebSocket は、ブラウザとサーバー間の実際の長時間接続と全二重通信 (通信の際に常に回線を参照する) を実現する HTML の新しいプロトコルです。は、A から B、B から A への双方向信号伝送です）。
現在公開されているプロトコルのほとんどは、ブラウザーの HTTP プロトコルを通じて実現され、クライアントとサーバー間のリクエストが完了するとサーバーが応答します。の場合、サーバーはクライアントにアクティブに応答できず、特定の要件では、サーバー上の最新のデータを取得してクライアントに表示するためにデータをリアルタイムで更新する必要があります。このようなニーズを実現するために、ほとんどの企業はポーリングテクノロジーを使用しています。ポーリング技術では、ブラウザが一定時間（1秒など）ごとにhttpリクエストを発行し、サーバーが最新のデータをブラウザに返すことで、データのリアルタイム更新を実現しています。これにより、明らかに擬似的な長時間接続が実現します。技術的には、いくつかの欠陥が存在します。クライアントはサーバー上のデータが更新されたかどうかを知らないため、一定期間ごとの HTTP リクエストは毎回意味をなさない可能性があり、複数のリクエスト (データ) の間には必ず無効なリクエストが存在します。前回のリクエストから返されたものは今回とまったく同じです）。
ポーリング技術には大きな欠点があることがわかりますが、WebSocket は実際に長い接続を実現し、サーバーがデータを変更したときにこの要求をうまく実現できるのがこの機能です。サーバーは、無効な要求応答を返すことなく、新しいデータをクライアントに返すことができます。
WebSocket 接続を実装するプロセスでは、ブラウザを通じて WebSocket 接続リクエストを送信し、サーバーが応答を送信する必要があります。このプロセスは通常「ハンドシェイク」と呼ばれます。

WebSocketの使い方を詳しく解説

2: Java は WebSocket を実装します
1。
JSR356 の WebSocket 仕様のサーバー側実装では、javax.websocket.* API を使用し、WebSocket サーバーのエンドポイントとして @ServerEndpoint の注釈を付けることができます。コード例は次のとおりです。 (value="/chatServer" )
パブリッククラスチャット {
プライベート静的 Set
sessions = Collections.synchronizedSet(new HashSet()); private static Listmessages = Collections.synchronizedList(new LinkedList());

private HttpSession httpSession;
@OnOpen
public void onOpen(Session session,EndpointConfig config) {
    //to do somthing
}
@OnMessage
public void onMessage(String message, Session session) {
}
@OnClose
public void onClose(Session session, CloseReason reason) {
}
@OnError
public void onError(Throwable t) {
}
}

コードの説明: 上記の簡潔なコードは、WebSocket サーバーを確立します。 @ServerEndpoint(“/chatServer”) のアノテーションアノテーションエンドポイントは、WebSocket サーバーを示します。 ws://[サーバー IP またはドメイン名]:[サーバーポート]/demo/chatServer のアクセスエンドポイントで実行されます。クライアントブラウザは、WebSocket クライアント API への HTTP ロング接続をすでに開始できます。

@ServerEndpoint のアノテーションが付けられたクラスには、パラメーターのないパブリック
コンストラクター
が必要です。@onMessage のアノテーションが付けられた Java メソッドは、受信 WebSocket 情報をテキスト形式またはバイナリ形式で受信するために使用されます。 @OnOpen は、このエンドポイントへの新しい接続が確立されるときに呼び出されます。パラメーターは、接続のもう一方の端に関する詳細を提供します。セッションは、2 つの WebSocket エンドポイント間の会話接続のもう一方の端を示し、HTTPSession と同様の概念として理解できます。 @OnClose は、接続が終了するときに呼び出されます。
アノテーションを使用すると、WebSocket サーバーを作成するのに非常に便利です。コードは単純ですが、私自身の実践中に、サーバーに接続できない、クライアントが報告するだけなど、不可解な問題が多数発生しました。 404 エラーです。しかし、サーバー側のコードを確認すると、問題はないようです。ネットで検索しても、この問題を解決したいという答えは見つかりませんでした。多くの人がこの問題に遭遇し、非常に混乱していたと思います。
ただし、WebSocket によって実装されたサーバー側は、いくつかの特定の要件を非常によく満たしています。
2．
クライアントの実装
クライアントは、js コードを通じてサーバーに接続します。まず、サーバー側で WebSocket オブジェクトを作成し、サーバーに接続する必要があります。コード:

/******************************************************/ var msgContainer = document.getElementById(“msgContainer”); // 服务器地址 var wsUrl = “ws://127.0.0.1:8080/demo/chatServer”; // 创建WebSocket对象 var webSocket = new WebSocket(wsUrl); // 与服务器建立连接 webSocket.onopen = function() { 
    console.log(“与服务器连接成功！！”); } // 接收到服务器传来的消息 webSocket.onmessage = function(mes) {
} // 服务器关闭 webSocket.onclose = function() { 
    console.log(“close!”); } // 服务器异常 webSocket.onerror = function() { 
    console.log(“error!”); } // 浏览器刷新或者关闭时，先关闭当前页面的webSocket对象 window.onbeforunload = function() { 
    webSocket.close(); } // 发送消息 function send() { webSocket.send(jsonMsg); } /******************************************************/

代码（var webSocket = new WebSocket(wsUrl);）是在申请一个 WebSocket 对象，参数是需要连接的服务器端的地址，同 HTTP 协议开头一样，WebSocket 协议的 URL 使用 ws://开头，另外安全的 WebSocket 协议使用 wss://开头。
WebSocket 对象一共支持四个消息 onopen, onmessage, onclose 和 onerror，有了这 4 个事件，我们就可以很容易很轻松的驾驭 WebSocket。
当 Browser 和 WebSocketServer 连接成功后，会触发 onopen 消息；如果连接失败，发送、接收数据失败或者处理数据出现错误，browser 会触发 onerror 消息；当 Browser 接收到 WebSocketServer 发送过来的数据时，就会触发 onmessage 消息，参数 mes中包含 Server 传输过来的数据；当 Browser 接收到 WebSocketServer 端发送的关闭连接请求时，就会触发 onclose 消息。我们可以看出所有的操作都是采用异步回调的方式触发，这样不会阻塞 UI，可以获得更快的响应时间，更好的用户体验。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

WebSocketの使い方を詳しく解説

関連記事