webSocket示列

后台代码

package com.xiaoc.websocket.servlet;

import java.io.IOException;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

import org.apache.juli.logging.Log;
import org.apache.juli.logging.LogFactory;

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

    private static final Log log = LogFactory.getLog(webSocketDemoServlet.class);

    private static final String GUEST_PREFIX = "Guest";
    private static final AtomicInteger connectionIds = new AtomicInteger(0);
    private static final Set<webSocketDemoServlet> connections = new CopyOnWriteArraySet<webSocketDemoServlet>();

    private String nickname;
    private Session session;

    public webSocketDemoServlet() {
        nickname = GUEST_PREFIX + connectionIds.getAndIncrement();
    }

    /*
     * 当websocket的客户端连接到服务器时候，这个方法就会执行，并且传递一个session会话对象来
     * 我们拿到这话session，就是可以给客户端发送消息
     */
    @OnOpen
    public void start(Session session) {
        this.session = session;
        connections.add(this);
        String message = String.format("* %s %s", nickname, "has joined.");
        broadcast(message);
    }

    /* 客户端被关闭时候，就会自动会调用这个方法 */
    @OnClose
    public void end() {
        connections.remove(this);
        String message = String.format("* %s %s", nickname, "has disconnected.");
        broadcast(message);
    }

    /* 客户端给服务器发送消息，这个方法会自动调用，并且可以拿到发送过来的数据 */
    @OnMessage
    public void incoming(String message) {
        // Never trust the client
        System.out.println(message);
        broadcast(message);
    }

    /* 发生了异常自动执行 */
    @OnError
    public void onError(Throwable t) throws Throwable {
        log.error("Chat Error: " + t.toString(), t);
    }

    /* 广播：遍历客户端集，发送消息，注意发送要用的session，用session.getBasicRemote().sendText(msg)发送消息 */
    private static void broadcast(String msg) {
        for (webSocketDemoServlet client : connections) {// 遍历所有
            try {// 如果这个client已经在线
                synchronized (client) {
                    client.session.getBasicRemote().sendText(msg);// 发送消息
                }
            } catch (IOException e) {// 如果这个client不在线
                log.debug("Chat Error: Failed to send message to client", e);
                connections.remove(client);
                try {
                    client.session.close();
                } catch (IOException e1) {
                    // Ignore
                }
                String message = String.format("* %s %s", client.nickname, "has been disconnected.");
                broadcast(message);
            }
        }
    }
}

前端页面

<!DOCTYPE HTML>
<html>
<head>
<title>WebSocket demo</title>
<style>
body {
    padding: 40px;
}

#outputPanel {
    margin: 10px;
    padding: 10px;
    background: #eee;
    border: 1px solid #000;
    min-height: 300px;
}
</style>
</head>
<body>
    <input type="text" id="messagebox" size="60" />
    <input type="button" id="buttonSend" value="Send Message" />
    <input type="button" id="buttonConnect" value="Connect to server" />
    <input type="button" id="buttonClose" value="Disconnect" />
    <br>
    <%
        out.println("Session ID = " + session.getId());
    %>
    <div id="outputPanel"></div>
</body>
<script type="text/javascript">
    var infoPanel = document.getElementById('outputPanel'); // 输出结果面板  
    var textBox = document.getElementById('messagebox'); // 消息输入框  
    var sendButton = document.getElementById('buttonSend'); // 发送消息按钮  
    var connButton = document.getElementById('buttonConnect');// 建立连接按钮  
    var discButton = document.getElementById('buttonClose');// 断开连接按钮  
    // 控制台输出对象  
    var console = {
        log : function(text) {
            infoPanel.innerHTML += text + "<br>";
        }
    };
    // WebSocket演示对象  
    var demo = {
        socket : null, // WebSocket连接对象  
        host : '', // WebSocket连接 url  
        connect : function() { // 连接服务器  
            window.WebSocket = window.WebSocket || window.MozWebSocket;
            if (!window.WebSocket) { // 检测浏览器支持  
                console.log('Error: WebSocket is not supported .');
                return;
            }
            this.socket = new WebSocket(this.host); // 创建连接并注册响应函数  
            this.socket.onopen = function() {
                console.log("websocket is opened .");
            };
            this.socket.onmessage = function(message) {
                console.log(message.data);
            };
            this.socket.onclose = function() {
                console.log("websocket is closed .");
                demo.socket = null; // 清理  
            };
        },
        send : function(message) { // 发送消息方法  
            if (this.socket) {
                this.socket.send(message);
                return true;
            }
            console.log('please connect to the server first !!!');
            return false;
        }
    };
    // 初始化WebSocket连接 url  
    demo.host = (window.location.protocol == 'http:') ? 'ws://' : 'wss://';
    demo.host += window.location.host + '/websocket/chat';
    // 初始化按钮点击事件函数  
    sendButton.onclick = function() {
        var message = textBox.value;
        if (!message)
            return;
        if (!demo.send(message))
            return;
        textBox.value = '';
    };
    connButton.onclick = function() {
        if (!demo.socket)
            demo.connect();
        else
            console.log('websocket already exists .');
    };
    discButton.onclick = function() {
        if (demo.socket)
            demo.socket.close();
        else
            console.log('websocket is not found .');
    };
</script>
</html>

后台代码

前端页面

猜你喜欢