java调用websocket实现聊天室简单demo

环境要求至少jdk1.7、tomcat7

pom.xml

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

WebSocket.java

package com.websockets;



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

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

	/**
	 * 与某个客户端的连接会话，需要通过它来给客户端发送数据
	 */
	private Session session;

	private static CopyOnWriteArrayList<WebSocket> sockets = new CopyOnWriteArrayList<>();

	/**
	 * 创建
	 * @param session
	 */
	@OnOpen
	public void onOpen(Session session) {
		this.session = session;
		System.out.println("创建");
		sockets.add(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();
	}

}

聊天调用页面

page.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>聊天界面</title>
    <style>
        /**重置标签默认样式*/
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-family: '微软雅黑'
        }

        #container {
            width: 450px;
            height: 780px;
            background: #eee;
            margin: 80px auto 0;
            position: relative;
            box-shadow: 20px 20px 55px #777;
        }

        .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">发送</span>
    </div>
</div>
</body>


<script>


    window.onload = function () {

        var webSocket = null;
        if (webSocket == null) {
            /* ws://localhost:8080/test/websocket 为websocket调用地址*/
            webSocket = new WebSocket('ws://localhost:8080/test/websocket');
        } else {
            alert("浏览器不支持websocket");
        }

        /*发生错误*/
        webSocket.onerror = function (event) {
            console.log(event);
        };

        /*创建*/
        webSocket.onopen = function (event) {
            onMessage("加入群聊");
        };

        /*监听消息*/
        webSocket.onmessage = function (event) {
            onMessage(event.data);
        };
　　　　　　
　　　　　 /*关闭*/
　　　　　webSocket.onclose = function  (event) {
　　　　　　　
        };
        

        var arrIcon = ['https://c-ssl.duita_EyjSF.thumb.700_0.jpeg', 'https://c-ssl.duitan0_0.jpeg'];
        var num = 0;     //控制头像改变
        var iNow = -1;    //用来累加改变左右浮动
        var icon = document.getElementById('user_face_icon').getElementsByTagName('img');
        var btn = document.getElementById('btn');
        var text = document.getElementById('text');
        var content = document.getElementsByTagName('ul')[0];
        var img = content.getElementsByTagName('img');
        var span = content.getElementsByTagName('span');


        btn.onclick = function () {
            if (text.value == '') {
                alert('不能发送空消息');
            } else {
                /*发送消息*/
                webSocket.send(text.value);
                iNow++;

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

                text.value = '';
                // 内容过多时,将滚动条放置到最底端
                contentcontent.scrollTop = content.scrollHeight;
            }
        }


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


    }


</script>
</html>

java调用websocket实现聊天室简单demo

猜你喜欢