WebSocket 1.0的学习和简单使用

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
Status code Name Description
0-999   Reserved and not used.
1000 CLOSE_NORMAL Normal closure; the connection successfully completed whatever purpose for which it was created.
1001 CLOSE_GOING_AWAY The endpoint is going away, either because of a server failure or because the browser is navigating away from the page that opened the connection.
1002 CLOSE_PROTOCOL_ERROR The endpoint is terminating the connection due to a protocol error.
1003 CLOSE_UNSUPPORTED The connection is being terminated because the endpoint received data of a type it cannot accept (for example, a text-only endpoint received binary data).
1004   Reserved. A meaning might be defined in the future.
1005 CLOSE_NO_STATUS Reserved.  Indicates that no status code was provided even though one was expected.
1006 CLOSE_ABNORMAL Reserved. Used to indicate that a connection was closed abnormally (that is, with no close frame being sent) when a status code is expected.
1007   The endpoint is terminating the connection because a message was received that contained inconsistent data (e.g., non-UTF-8 data within a text message).
1008   The endpoint is terminating the connection because it received a message that violates it‘s policy. This is a generic status code, used when codes 1003 and 1009 are not suitable.
1009 CLOSE_TOO_LARGE The endpoint is terminating the connection because a data frame was received that is too large.
1010   The client is terminating the connection because it expected the server to negotiate one or more extension, but the server didn‘t.
1011   The server is terminating the connection because it encountered an unexpected condition that prevented it from fulfilling the request.
1012-1014   Reserved for future use by the WebSocket standard.
1015   Reserved. Indicates that the connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can‘t be verified).
1016-1999   Reserved for future use by the WebSocket standard.
2000-2999   Reserved for use by WebSocket extensions.
3000-3999   Available for use by libraries and frameworks. May not be used by applications.
4000-4999   Available for use by applications.

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,后边的值是访问地址
  • 关于注解请看
Annotation Role

@ServerEndpoint

Declare a Server Endpoint

@ClientEndpoint

Declare a Client Endpoint

@OnOpen

Declare this method handles open events

@OnMessage

Declare this method handles Websocket messages

@OnError

Declare this method handles error

@OnClose

Declare this method handles WebSocket close events



<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的学习和简单使用,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。