WebSocket JavaScript API(client)

<script>
    var URL = "ws://localhost:8080/WebSocketChatRoom/chatRoomServer";
    var websocket;
    var userName;

    function setConnected(connected) {
        document.getElementById(‘connect‘).disabled=connected;
        document.getElementById(‘disconnect‘).disabled = !connected;
        document.getElementById(‘send‘).disabled = !connected;
    }

    function connect() {

        if(‘WebSocket‘ in window){
            websocket = new WebSocket(URL);
        }else if(‘MozWebSocket‘ in window){
            websocket = new MozWebSocket(URL);
        }else{
            alert("您的浏览器不支持WebSocket,请更换最新版本浏览器");
            return;
        }

        websocket.onopen = function (evnt) {
            userName = document.getElementById(‘userId‘).value;
            if(userName == ""){
                alert("用户名不能为空");
                return;
            }else{
                setConnected(true);
                websocket.send(userName + "加入聊天室");
            }
        };
        websocket.onmessage = function (evnt) {
            onMessage(evnt)
        };
        websocket.onerror = function (evnt) {
            onError(evnt)
        };
        websocket.onclose = function (evnt) {
            disconnect(evnt);
        }
    }
    function sendMessage() {
        var userName = document.getElementById(‘userId‘).value;
        var msg = document.getElementById(‘message‘).value;
        websocket.send(userName+": "+msg);

    }
    function onMessage(evnt) {
        if (typeof evnt.data == "string") {
            log(evnt.data);
        }
    }
    function onError(evnt) {
        log(‘错误: ‘ + evnt.data);
    }
    /*function onClose(evnt) {
        setConnected(false);
    }*/
    function disconnect(evnt) {
        if(websocket != null){
            websocket.close(1000, userName + "退出聊天室");
            websocket = null;
            log("你已退出聊天室");
            setConnected(false);
        }

    }
    function log(message) {
        var console = document.getElementById(‘console‘);
        var p = document.createElement(‘p‘);
        p.style.wordWrap = ‘break-word‘;
        p.appendChild(document.createTextNode(message));
        console.appendChild(p);
        while (console.childNodes.length > 25) {
            console.removeChild(console.firstChild);
        }
        console.scrollTop = console.scrollHeight;
    }
</script>

• websocket.onopen #当打开一个新的连接时会调用这个方法
• websocket.onmessage #当server有数据返回时调用
• websocket.send() #向服务端发送信息，类型包括{String|ArrayBuffer|ArrayBufferView|Blob}
• websocket.close() #向服务器发送关闭的请求，参数{number} [code]  {string} [reason]，附相关代码表，一般使用本方法关闭code为1000，直接关闭浏览器为1006，CLOSE_ABNORMAL

WebSocket Java API(Server)

@ServerEndpoint("/chatRoomServer")
public class MessageEndPoint {

    private static final ArrayList<Session> sessions;

    static {
        sessions = new ArrayList<Session>();
    }

    @OnOpen
    public void onOpen(Session session) {
        sessions.add(session);
    }

    @OnMessage
    public void onMessage(String message) {
        sendMessage(message);
    }

    @OnClose
    public void onClose(Session session,CloseReason closeReason) {
        sessions.remove(session);
        sendMessage(closeReason.getReasonPhrase());
    }

    private void sendMessage(String message){
        for(Session session : sessions){
            try {
                session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

}

• @ServerEndpoint("/chatRoomServer")，ServerEndpoint把一个POJO类转换成了WebSocket EndPoint，后边的值是访问地址
• 关于注解请看

<dependency>
          <groupId>javax.websocket</groupId>
          <artifactId>javax.websocket-api</artifactId>
          <version>1.0</version>
          <scope>provided</scope>
      </dependency>

我使用的tomcat，<scope>provided</scope>这句一定要加上，否则会报404，tomcat中有相关重复的类

WebSocket 1.0的学习和简单使用