Websocket入門
4631 ワード
WebsocketはHtml 5の興起に伴ってこんなに長い間、私はずっとwebsocketの奥義を探りたいと思っていました.しかし、いつも関連資料を見る時間がありません.今日は用事がないような気がします.しかも少し暇で、他の人のブログを見ました.Websocketのコード層での実現を基本的に理解した.これからやるのはwebsocketの原理についてです.まずwebsocketに関するチャットプログラムを書きましょう.もちろんこのチャットプログラムもj 2 eeに基づいています.クライアントはオリジナルのjsで実現する.まずwebsocketを使いたいなら、jdkのバージョンは必ず1.7以上です.Websocketは1.7以降の新しい特性です.では、コードレベルの開発を始めましょう.
まずサーバ側プログラムを確立する..
WebSocketServicelet、もちろん注釈を使って実現することもできます.ここで注釈のコードは書きません.servletの作成後はもちろんservletを構成する.Webでlファイルでの構成
次はクライアントのコードを書きます.index.html
まずサーバ側プログラムを確立する..
package com.system.maylor.test;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.ArrayList;
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;
public class WebSocketTest extends WebSocketServlet {
private static final long serialVersionUID = -4853540828121130946L;
private static ArrayList<MyMessageInbound> mmiList = new ArrayList<MyMessageInbound>();
@Override
protected StreamInbound createWebSocketInbound(String str,
HttpServletRequest request) {
return new MyMessageInbound();
}
private class MyMessageInbound extends MessageInbound {
WsOutbound myoutbound;
@Override
public void onOpen(WsOutbound outbound) {
try {
System.out.println("Open Client.");
this.myoutbound = outbound;
mmiList.add(this);
outbound.writeTextMessage(CharBuffer.wrap("Hello!"));
} catch (IOException e) {
e.printStackTrace();
}
}
@Override
public void onClose(int status) {
System.out.println("Close Client.");
mmiList.remove(this);
}
// ,
@Override
public void onTextMessage(CharBuffer cb) throws IOException {
System.out.println("Accept Message : " + cb);
for (MyMessageInbound mmib : mmiList) {
CharBuffer buffer = CharBuffer.wrap(cb);
mmib.myoutbound.writeTextMessage(buffer);
mmib.myoutbound.flush();
}
}
@Override
public void onBinaryMessage(ByteBuffer bb) throws IOException {
}
}
}WebSocketServicelet、もちろん注釈を使って実現することもできます.ここで注釈のコードは書きません.servletの作成後はもちろんservletを構成する.Webでlファイルでの構成
<display-name>Websocket</display-name>
<servlet>
<servlet-name>wsServlet</servlet-name>
<servlet-class>com.system.maylor.test.WebSocketTest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>wsServlet</servlet-name>
<url-pattern>/wsServlet</url-pattern>
</servlet-mapping>次はクライアントのコードを書きます.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Tomcat WebSocket Chat</title>
<script>// websocket
var ws = new WebSocket("ws://localhost:8080/Websocket/wsServlet"); // ws
ws.onopen = function() {
};//
ws.onmessage = function(message) {
document.getElementById("chatlog").textContent += message.data + "
";
};
function postToServer() {
ws.send(document.getElementById("msg").value);
document.getElementById("msg").value = "";
}
function closeConnect() {
ws.close();
}
</script>
</head>
<body>
<textarea id="chatlog" readonly></textarea>
<br />
<input id="msg" type="text" />
<button type="submit" id="sendButton" onClick="postToServer()">Send!</button>
<button type="submit" id="sendButton" onClick="closeConnect()">End</button>
</body>
</html>