トップ 新規 編集 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

JSPの応用:WebSocketによるチャット

 WebSocketを使ったチャット

以前のtomcat(8.0系列)はWebsocketを独自実装していており、その時期に作ったサンプル。現在はJSR356に対応した標準的な実装になっており、そのままでは動かない。

  • serlvet.WebSocketChatServlet.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package servlet;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;

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;


@SuppressWarnings("serial")
@WebServlet(urlPatterns = { "/chat" })
public class WebSocketChatServlet extends WebSocketServlet {
    private static final Set<MessageInbound> chatClients = new CopyOnWriteArraySet<>();
    @Override
    protected StreamInbound createWebSocketInbound(String prtcl, HttpServletRequest req) {
        return new MessageInbound() {
            @Override
            protected void onOpen(WsOutbound outbound) {
                System.out.println("接続しました");
                chatClients.add(this);
            }
            @Override
            protected void onClose(int status) {
                System.out.println("接続が切れました");
                chatClients.remove(this);
            }
            @Override
            protected void onTextMessage(CharBuffer message) throws IOException {
                System.out.println(message.toString());
                for (MessageInbound client : chatClients) {
                    client.getWsOutbound().writeTextMessage(message);
                    message.position(0);
                }
            }
            @Override
            protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
            }
        };
    }
}
  • chat.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>チャットクライアント</title>
<script>
    var url = "ws://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/chat";
    var ws = new WebSocket(url);
    ws.onmessage = function(event) {
        document.getElementById("messages").innerHTML = event.data + "<br/>"
                + document.getElementById("messages").innerHTML;
    };
    window.onunload = function() {
        ws.close();
    };
    function sendMessage() {
        ws.send(document.getElementById("message").value);
        document.getElementById("message").value = "";
    };
</script>
</head>
<body>
    <input type="text" id="message" onchange="sendMessage()" />
    <input type="button" value="送信" onclick="sendMessage()">
    <div id="messages"></div>
</body>
</html>
WebSocketChatServlet.java chat.jsp

最終更新時間:2018年01月11日 10時20分11秒