English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

HTML5Tomcatで 7.0でWebSocket接続を実現し、シンプルなリアルタイムチャットを実現

1、什么是WebSocket？

WebSocketは、自然な全双方向、双方向、一つのソケット接続です。WebSocketを使用すると、HTTPリクエストがWebSocketコネクション（WebSocketまたはWebSocket over TLS（Transport Layer Security、トランスポートレイヤーセキュリティ、元の「SSL」））を開く単一のリクエストに変わり、クライアントからサーバーおよびサーバーからクライアントへの同一接続を再利用します。WebSocketコネクションが確立されると、サーバーはメッセージが利用可能になったときにそれらを送信できます。例えば、ポーリングとは異なり、WebSocketは単一のリクエストを送信します。サーバーはクライアントからのリクエストを待つ必要はありません。同様に、クライアントはいつでもサーバーにメッセージを送信できます。ポーリングと異なり、有効なメッセージがあれば無ければ、一定時間ごとにリクエストを送信するので、単一のリクエストは遅延を大幅に減少させます。

2、WebSocket API

WebSocket APIは、Webを通じてクライアントアプリケーションとサーバーサイドプロセス間に全双方向の通信を確立できるようにします。WebSocketインターフェースは、クライアントに使用できるメソッドとクライアントがネットワークと交互する方法を規定しています。

3、WebSocket構造関数

サーバーに接続するWebSocketコネクションを確立するために、WebSocketインターフェースを使用して、接続したいエンドポイントを表すURLを指し示すことでWebSocketオブジェクトをインスタンス化します。WebSocketプロトコルは、クライアントとサーバー間の非暗号化および暗号化トラフィックにそれぞれ使用されるwsおよびwssの2種類のURLスキームを定義しています。

例：var ws = new WebSocket("ws://www.websocket.org");

4、WebSocketイベント

WebSocket APIは純事件駆動のものです。アプリケーションコードはWebSocketオブジェクト上のイベントを監視し、入力データや接続状態の変更を処理します。WebSocketプロトコルも事件駆動です。

WebSocketオブジェクトのスケジューリング4異なるイベント：

A、openイベント：

一旦サーバーがWebSocket接続リクエストに応答したら、openイベントが発生し、接続が確立されます。openイベントに対応するコールバック関数はonopenと呼ばれます。

例：

ws.onopen = function(e) {
console.log("Connection open...");
};

B、messageイベント：

messageイベントはメッセージを受信したときに発生します。このイベントに対応するコールバック関数はonmessageです。

例：

ws.onmessage = function(e) {
if(typeof e.data === "string"){
console.log("String message received", e, e.data);
} else {
console.log("Other message received", e, e.data);
}
};

C、errorイベント：

errorイベントは予期せぬ障害が発生したときに発生します。このイベントに対応するコールバック関数はonerrorです。
例：

ws.onerror = function(e){
console.log('websocked error');
handerError();
}

D、closeイベント：

closeイベントはWebSocket接続が閉じられたときに発生します。このイベントに対応するコールバック関数はoncloseです。

例：

ws.onclose = function(e) {
console.log("Connection closed", e);
};

5、WebSocketメソッド

WebSocketオブジェクトにはsend()とclose()という二つのメソッドがあります。

A、send()メソッド：

WebSocketを使用してクライアントとサーバー間に全双方向の双方向接続を確立した後、接続がオープンされている間にsend()メソッドを呼び出すことができます。send()メソッドを使用して、クライアントからサーバーにメッセージを送信することができます。一つのメッセージまたは複数のメッセージを送信した後、接続をオープンのままにしておくか、close()メソッドを呼び出して接続を終了することができます。

例:

ws.send("Hello WebSocket!");

B、close()メソッド：

close()メソッドを使用すると、WebSocket接続を閉じたり接続試みを終了したりできます。接続が既に閉じられている場合、このメソッドは何もしないです。close()メソッドを呼び出した後は、閉じられたWebSocketにデータを送信することはできません。close()メソッドには、2つのオプションパラメータが渡されます：code（数字のステータスコード）とreason（テキストの理由）。これらのパラメータを渡すことで、クライアントが接続を閉じた理由についての情報をサーバーに伝えることができます。

注：上記はWebSocketの簡単な紹介です。以下では、簡単なウェブページリアルタイムチャットの例を使って、WebSocketの使用方法を説明します。

A:まずプロジェクトを新しいものとしてchatroomと名付け、その後パッケージを作成し、サーバーサイドの接続を実現するクラスを作成します。このクラスの名前はChatWebSocketServlet.Javaです；

具体的なプロジェクトの構築は以下の図の通りです：

　

B:サーバーサイド実装クラスChatWebSocketServlet.javaを書きます、具体的なコードは以下の通りです：

package com.yc.chat.Servlet;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;
@WebServlet("/chat")
public class ChatWebSocketServlet extends WebSocketServlet {
private final Map<Integer, WsOutbound> map = new HashMap<Integer, WsOutbound>();
private static final long serialVersionUID = -1058445282919079067L;
@Override
protected StreamInbound createWebSocketInbound(String arg0, HttpServletRequest request) {
// StreamInbound：基づくWebSocketのストリーム実装クラス（内部ストリーム）、アプリケーションはこのクラスを拡張し、抽象メソッドonBinaryDataおよびonTextDataを実装するべきです。
return new ChatMessageInbound();
}
class ChatMessageInbound extends MessageInbound {
// MessageInbound：基づくWebSocketのメッセージ実装クラス（内部メッセージ）、アプリケーションはこのクラスを拡張し、抽象メソッドonBinaryMessageおよびonTextMessageを実装するべきです。
@Override
protected void onOpen(WsOutbound outbound) {
map.put(outbound.hashCode(), outbound);
super.onOpen(outbound);
}
@Override
protected void onClose(int status) {
map.remove(getWsOutbound().hashCode());
super.onClose(status);
}
@Override
protected void onBinaryMessage(ByteBuffer buffer) throws IOException {
}
@Override
protected void onTextMessage(CharBuffer buffer) throws IOException {
String msg = buffer.toString();
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
msg = " <font color=green>匿名ユーザー " + sdf.format(date) + "</font><br/> " + msg;
broadcast(msg);
}
private void broadcast(String msg) {
Set<Integer> set = map.keySet();
for (Integer integer : set) {
WsOutbound outbound = map.get(integer);
CharBuffer buffer = CharBuffer.wrap(msg);
try {
outbound.writeTextMessage(buffer);
outbound.flush();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}

C: フロントエンドページindex.jspの実装（機能を展示するためのもので、美しさはありません、比較的シンプルです）具体的なコードは以下の通りです：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>websocketチャットルーム</title>
<style type="text/css">
#chat {
text-align: left;
width: 600px;
height: 500px;
width: 600px;
}
#up {
text-align: left;
width: 100%;
height: 400px;
border: 1px solid green;
OVERFLOW-Y: auto;
}
#down {
text-align: left;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<h2 align="center">HTMLに基づいて5のチャットルーム</h2>
<div align="center" style="width: 100%; height: 700px;">
<div id="chat">
<div id="up"></div>
<div id="down">
<textarea type="text" style="width: 602px; height: 100%;" id="send"></textarea>
</div>
</div>
<input type="button" value="接続" onclick="chat(this);"> <input
type="button" value="送信" onclick="send(this);" disabled="disabled"
id="send_btn" title="[#1#]">
</div>
</body>
<script type="text/javascript">
var socket;
var receive_text = document.getElementById("up");
var send_text = document.getElementById("send");
function addText(msg) {
receive_text.innerHTML += "<br/>" + msg;
receive_text.scrollTop = receive_text.scrollHeight;
}
var chat = function(obj) {
obj.disabled = "disabled";
socket = new WebSocket('ws://ローカルホスト:8080/chatroom/chat');
receive_text.innerHTML += "<font color=green>サーバーに接続中……</font>";
//ソケットを開く 
socket.onopen = function(event) {
addText("<font color=green>连接成功！</font>");
document.getElementById("send_btn").disabled = false;
send_text.focus();
document.onkeydown = function(event) {
if (event.keyCode == 13 && event.ctrlKey) {
send();
}
}
};
socket.onmessage = function(event) {
addText(event.data);
};
socket.onclose = function(event) {
addText("<font color=red>接続切れ！</font>");
obj.disabled = "";
};
if (socket == null) {
addText("<font color=red>接続失敗！</font>");
}
};
var send = function(obj) {
if (send_text.value == "") {
return;
}
socket.send(send_text.value);
send_text.value = "";
send_text.focus();
}
</script>
</html>

このシンプルなリアルタイムチャットページが完成しました。次に、プロジェクトをTomcatにデプロイします 7.0サーバーを起動し、チャットを実現できます

結果表示：

1サーバー住所をアドレスバーに入力してください：

http://127.0.0.1:8080/chatroom/index.jsp

サーバーに接続する結果は以下の通りです：

　

2それぞれ異なるブラウザで開き、相互にメッセージを送信します（ここではGoogle ChromeとFirefoxを使用しています）。結果は以下の通りです：

以下は、編集者が皆さんに紹介したHTMLについてです。5Tomcatで 7.0でWebSocket接続を実現し、簡単なリアルタイムチャットを実現しました。皆さんに役立つことを願っています。何かご不明な点があれば、コメントを残してください。編集者は皆さんの質問に迅速に回答します。また、皆さんの呐喊教程サイトへのサポートに感謝します！

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされた内容であり、本サイトは所有権を有しないものであり、人間による編集は行われていません。著作権侵害が疑われる内容を見つけた場合は、メールを送信して：notice#oldtoolbag.com（メール送信時は、#を@に変更してください。通報の際には、関連する証拠を提供してください。一旦確認がつき次第、本サイトは侵害疑いのコンテンツをすぐに削除します。）

基礎教程
おすすめ