使用WebSocket实现网页聊天室-白红宇

使用WebSocket实现网页聊天室

阅读量：6213 次

发布时间：2019-06-21

本文共 7325 字，大约阅读时间需要 24 分钟。

知道WebSocket挺久了，但是一直没提起兴趣去了解它。

今天听说到。小小的试用了一下，发现slack的聊天功能做得相当强大，看了下网络请求，发现是基于WebSocket实现的。顿时提起兴趣，想了解下这强大的WebSocket。

先了解下WebSocket。

--开源中国的介绍：

--百度百科的介绍：

网上关于WebSocket的例子貌似不多，但最好的例子已经有了。偶然间发现tomcat的自带的例子中，已经有了基于WebSocket实现的聊天室例子。这里就不献丑，直接拿来用了。

首先，服务端的实现ChatAnnotation.java

/* *  Licensed to the Apache Software Foundation (ASF) under one or more *  contributor license agreements.  See the NOTICE file distributed with *  this work for additional information regarding copyright ownership. *  The ASF licenses this file to You under the Apache License, Version 2.0 *  (the "License"); you may not use this file except in compliance with *  the License.  You may obtain a copy of the License at * *      http://www.apache.org/licenses/LICENSE-2.0 * *  Unless required by applicable law or agreed to in writing, software *  distributed under the License is distributed on an "AS IS" BASIS, *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. *  See the License for the specific language governing permissions and *  limitations under the License. */package websocket.chat; 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; @ServerEndpoint(value = "/chat")public class ChatAnnotation {     private static final String GUEST_PREFIX = "Guest";    private static final AtomicInteger connectionIds = new AtomicInteger(0);    private static final Set
     
       connections =            new CopyOnWriteArraySet<>();     private final String nickname;    private Session session;     public ChatAnnotation() {        nickname = GUEST_PREFIX + connectionIds.getAndIncrement();    }     @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        // TODO: 过滤输入的内容        broadcast(message);    }     @OnError    public void onError(Throwable t) throws Throwable {        System.out.println("Chat Error: " + t.toString());    }     private static void broadcast(String msg) {        for (ChatAnnotation client : connections) {            try {                synchronized (client) {                    client.session.getBasicRemote().sendText(msg);                }            } catch (IOException e) {                System.out.println("Chat Error: Failed to send message to client");                connections.remove(client);                try {                    client.session.close();                } catch (IOException e1) {                    // Ignore                }                String message = String.format("* %s %s",                        client.nickname, "has been disconnected.");                broadcast(message);            }        }    }}

稍微解释下上面这段代码。

1、@ServerEndpoint(value = "/websocket/chat")定义一个WebSocket服务端。value即访问地址。这个例子中：客户端通过 ws://{domain}/{context}/chat 来进行连接

2、Set<ChatAnnotation> connections用于存储聊天室中的连接实例

3、@OnPen，连接创建时调用的方法

4、@OnClose，连接关闭时调用的方法

5、@OnMessage，传输信息过程中调用的方法

6、@OnError，发生错误时调用的方法

7、broadcast(String msg)，通过connections，对所有其他用户推送信息的方法

客户端的实现chat.xhtml


     
     
     
          
      Apache Tomcat WebSocket Examples: Chat    
          
        25) {                console.removeChild(console.firstChild);            }            console.scrollTop = console.scrollHeight;        });         Chat.initialize();         document.addEventListener("DOMContentLoaded", function() {            // Remove elements with "noscript" class -