java call websocket chat rooms simple demo

Environmental requirements at least jdk1.7, tomcat7

pom.xml

		<dependency>
			<groupId>javax</groupId>
			<artifactId>javaee-api</artifactId>
			<version>7.0</version>
			<scope>provided</scope>
		</dependency>

WebSocket.java

com.websockets Package; 



Import javax.websocket *;. 
Import javax.websocket.server.ServerEndpoint; 
Import java.io.IOException; 
Import java.util.concurrent.CopyOnWriteArrayList; 

@ServerEndpoint (value = "/ WebSocket") 
public class a WebSocket { 

	/ ** 
	 * with the connection session to a client, it needs to be sent to the client by the data 
	 * / 
	Private the session the session; 

	Private a CopyOnWriteArrayList static <a WebSocket> Sockets a CopyOnWriteArrayList new new = <> (); 

	/ ** 
	 * Create 
	 * @ the session param 
	 * / 
	@OnOpen 
	public void the onOpen (the Session the session) { 
		this.session = the session; 
		System.out.println ( "Create"); 
		sockets.add (the this); 
	}
 
	/ **
	 * 发送消息
	 * @param message
	 * @throws IOException
	 */
	@OnMessage
	public void sendMessage(String message) throws IOException {
		for (WebSocket webSocket : sockets) {
			webSocket.session.getBasicRemote().sendText(message);
		}
	}

	/**
	 * 关闭
	 */
	@OnClose
	public void onClose() {
		sockets.remove(this);
	}

	/**
	 * 发生错误
	 * @param session
	 * @param error
	 */
	@OnError
	public void onError(Session session, Throwable error) {
		System.out.println("发生错误");
		error.printStackTrace();
	}

}

Chat calling page

page.html

<! DOCTYPE HTML> 
<HTML> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <title> chat interface </ title> 
    <style> 
        / ** reset tag default styles * / 
        * { 
            margin: 0; 
            padding : 0; 
            List-style: none; 
            font-Family: 'Microsoft yahei' 
        } 

        #container { 
            width: 450px; 
            height: 780px; 
            background: #eee; 
            margin: 80px Auto 0; 
            position: relative; 
            Box-Shadow: 20px # 777 55px 20px; 
        } 

        .header { 
            background: # 000;
            height: 40px;
            color: #fff;
            line-height: 34px;
            font-size: 20px;
            padding: 0 10px;
        }

        .footer {
            width: 430px;
            height: 50px;
            background: #666;
            position: absolute;
            bottom: 0;
            padding: 10px;
        }

        .footer input {
            width: 275px;
            height: 45px;
            outline: none;
            font-size: 20px;
            text-indent: 10px;
            position: absolute;
            border-radius: 6px;
            right: 80px;
        }

        .footer span {
            display: inline-block;
            width: 62px;
            height: 48px;
            background: #ccc;
            font-weight: 900;
            line-height: 45px;
            cursor: pointer;
            text-align: center;
            position: absolute;
            right: 10px;
            border-radius: 6px;
        }

        .footer span:hover {
            color: #fff;
            background: #999;
        }

        #user_face_icon {
            display: inline-block;
            background: red;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            position: absolute;
            bottom: 6px;
            left: 14px;
            cursor: pointer;
            overflow: hidden;
        }

        img {
            width: 60px;
            height: 60px;
        }

        .content {
            font-size: 20px;
            width: 435px;
            height: 662px;
            overflow: auto;
            padding: 5px;
        }

        .content li {
            margin-top: 10px;
            padding-left: 10px;
            width: 412px;
            display: block;
            clear: both;
            overflow: hidden;
        }

        .content li img {
            float: left;
        }

        .content li span {
            background: #7cfc00;
            padding: 10px;
            border-radius: 10px;
            float: left;
            margin: 6px 10px 0 10px;
            max-width: 310px;
            border: 1px solid #ccc;
            box-shadow: 0 0 3px #ccc;
        }

        .content li img.imgleft {
            float: left;
        }

        .content li img.imgright {
            float: right;
        }

        .content li span.spanleft {
            float: left;
            background: #fff;
        }

        .content li span.spanright {
            float: right;
            background: #7cfc00;
        }
    </style>

</head>
<body>
<div id="container">
    <div class="header">
        <span style="float: left;">业余草:模拟微信聊天界面</span>
        <span style="float: right;">14:21</span>
    </div>
    <ul class="content">
    </ul>
    <div class="footer">
        <div id="user_face_icon">
            <img src="http://www.xttblog.com/icons/favicon.ico" alt="">
        </div>
        <input id="text" type="text" placeholder="说点什么吧...">
        <span id = "btn"> transmission </ span> 
    </ div>
        / * Listen for messages * /
</div>
</body>


<Script> 


    the window.onload = function () { 

        var WebSocket = null; 
        IF (WebSocket == null) { 
            / * WS: // localhost: 8080 / Test / * WebSocket call address WebSocket / 
            WebSocket a WebSocket new new = ( 'WS : // localhost: 8080 / Test / WebSocket '); 
        } the else { 
            Alert ( "browser does not support WebSocket"); 
        } 

        / * error * / 
        webSocket.onerror = function (Event) { 
            the console.log (Event); 
        }; 

        / * Create * / 
        webSocket.onopen = function (Event) { 
            the onMessage ( "group chat"); 
        }; 

        webSocket.onmessage = function (Event) { 
            the onMessage (the event.data); 
        }; 
　　　　　　
　　　　　 / * Close * / 
　　　　　webSocket.onclose = function (Event) { 
　　　　　　　
        }; 
        

        var arrIcon = [ 'HTTPS: //c-ssl.duita_EyjSF.thumb.700_0.jpeg', ' HTTPS: //c-ssl.duitan0_0.jpeg ']; 
        var NUM = 0; // change the picture control 
        var iNow = -1; // changed for accumulating around the floating 
        var icon = document.getElementById (' user_face_icon ' ). the getElementsByTagName ( 'IMG'); 
        var BTN = document.getElementById ( 'BTN'); 
        var text = document.getElementById ( 'text'); 
        var document.getElementsByTagName Content = ( 'UL') [0]; 
        var IMG Content = .getElementsByTagName ( 'IMG'); 
        var span = Content.getElementsByTagName('span');

 
        BTN.onclick = function () {
            IF (text.value == '') { 
                Alert ( 'not send empty message'); 
            } the else { 
                / * Send message * / 
                webSocket.send (text.value); 
                iNow ++; 

                IMG [iNow] + = .className ' imgright '; 
                span [iNow] + = .className' spanright '; 

                text.value =' '; 
                // content is too large, the scroll bar is placed to the bottom of 
                contentcontent.scrollTop = content.scrollHeight; 
            } 
        } 


        function the onMessage (value ) { 
            content.innerHTML + = '<Li> <IMG the src = "' + arrIcon [0] + '"> <span>' + value + '</ span> </ Li>';
        }


    }


</script>
</html>

java call websocket chat rooms simple demo

Guess you like