개발자의 길

[javascript/java] spring/jsp-javascript(server/client) websocket 통신 예제 본문

4. JAVA

[javascript/java] spring/jsp-javascript(server/client) websocket 통신 예제

자르르 2018. 1. 12. 10:50


서버를 실행해 놓고, 실제적으로 여러 클라이언트가 다 붙어서 메세지를 주고 받는 형식이다.


이 방식으로 웹소켓용 서버를 띄워 놓고, db나 다른 액션이 있을때 마다 다른곳에서 서버로 전송하고,


다른 클라이언트에서 그 메세지를 받아서 동적으로 처리가 가능 할것 같다..


밑에 예제는 완전 쌩짜로 만든거고


실제로 spring framework + jquery 조합으로는


stomp.js+sockjs.js  조합으로 이용하면,


하위 브라우저(websocket이 지원안되는) 까지 체크 해서 sockjs가 처리해줘서,


실무에선 해당 방식을 사용하길 권한한다.




<<<서버(java)>>>


import java.io.IOException;


import javax.websocket.OnClose;

import javax.websocket.OnError;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.RemoteEndpoint.Basic;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;


import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;


@Controller("TestSocket")

@RequestMapping(value = "Test")

@ServerEndpoint(value="/echo")

public class WebSocketController {


    private static final java.util.Set<Session> sessions = java.util.Collections.synchronizedSet(new java.util.HashSet<Session>());

    

    /**

     * 웹 소켓 테스트 화면

     * @return

     */

    @RequestMapping("webSocket")

    public String testView(){

        return "common/testWebSocket";

    }

    

    /**

     * @OnOpen allows us to intercept the creation of a new session.

     * The session class allows us to send data to the user.

     * In the method onOpen, we'll let the user know that the handshake was 

     * successful.

     */

    @OnOpen

    public void onOpen(Session session){

        System.out.println("Open session id : " + session.getId());

        

        try {

            final Basic basic = session.getBasicRemote();

            basic.sendText("Connection Established");

        } catch (IOException e) {

            System.out.println(e.getMessage());

        }

        

        sessions.add(session);

    }

    

    /**

     * 모든 사용자에게 메시지를 전달한다.

     * @param self

     * @param message

     */

    private void sendAllSessionToMessage(Session self, String message){

        try {

            for( Session session : WebSocketController.sessions ){

                if( ! self.getId().equals(session.getId()) )

                    session.getBasicRemote().sendText("All : " + message);

            }

        } catch (IOException e) {

            e.printStackTrace();

        }

    }

    

    /**

     * When a user sends a message to the server, this method will intercept the message

     * and allow us to react to it. For now the message is read as a String.

     */

    @OnMessage

    public void onMessage(String message, Session session){

        System.out.println("Message from " + session.getId() + ": " + message);

        try {

            final Basic basic = session.getBasicRemote();

            basic.sendText("to : " + message);

        } catch (IOException ex) {

            ex.printStackTrace();

        }

        

        sendAllSessionToMessage( session, message );

    }

    

    @OnError

    public void onError( Throwable e, Session session){

        

    }

    

    /**

     * The user closes the connection.

     * 

     * Note: you can't send messages to the client from this method

     */

    @OnClose

    public void onClose(Session session){

        System.out.println("Session " +session.getId()+" has ended");

        sessions.remove(session);

    }

}

 



<<<클라이언트(jsp-javascript)>>>


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Echo Chamber</title>

</head>

<body>


    <div>

        <input type="text" id="messageinput" />

    </div>

    <div>

        <button type="button" onclick="openSocket();">Open</button>

        <button type="button" onclick="send();">Send</button>

        <button type="button" onclick="closeSocket();">Close</button>

    </div>

    <!-- Server responses get written here -->

    <div id="messages"></div>


    <!-- Script to utilise the WebSocket -->

    <script type="text/javascript">

        var webSocket;

        var messages = document.getElementById("messages");


        function openSocket() {

            // Ensures only one connection is open at a time

            if (webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED) {

                writeResponse("WebSocket is already opened.");

                return;

            }

            

            // Create a new instance of the websocket

            webSocket = new WebSocket("ws://localhost:8080/TestSocket/echo");


            /**

             * Binds functions to the listeners for the websocket.

             */

            webSocket.onopen = function(event) {

                // For reasons I can't determine, onopen gets called twice

                // and the first time event.data is undefined.

                // Leave a comment if you know the answer.

                if (event.data === undefined)

                    return;


                writeResponse(event.data);

            };


            webSocket.onmessage = function(event) {

                writeResponse(event.data);

            };


            webSocket.onclose = function(event) {

                writeResponse("Connection closed");

            };

        }


        /**

         * Sends the value of the text input to the server

         */

        function send() {

            var text = document.getElementById("messageinput").value;

            webSocket.send(text);

        }


        function closeSocket() {

            webSocket.close();

        }


        function writeResponse(text) {

            messages.innerHTML += "<br/>" + text;

        }

    </script>


</body>

</html>

저작자표시

'4. JAVA' 카테고리의 다른 글

springboot - apache - tomcat 연동(springboot 내장톰캣)  (0) 2019.04.30
spring security 파헤치기 (구조, 인증과정, 설정, 핸들러 및 암호화 예제, @Secured, @AuthenticationPrincipal, taglib)  (0) 2019.04.10
[java] 원본 이미지 가지고 썸네일 생성[BufferedImage]  (0) 2017.10.13
[Java] 스트림과 병렬처리 - 필터링, 매핑, 정렬  (0) 2017.04.21
[java8] Collections  (0) 2017.02.13


이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
'4. JAVA' Related Articles more
Comments