基于WebSocket的简易聊天室

来源：互联网发布：淘宝店铺装修图片素材编辑：程序博客网时间：2024/05/10 06:09

web程序先看web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app version="3.0"         xmlns="http://java.sun.com/xml/ns/javaee"         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">  <display-name>test</display-name>  <welcome-file-list>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list></web-app>

也可以没有。

再看服务端：

import javax.websocket.OnClose;import javax.websocket.OnMessage;import javax.websocket.OnOpen;import javax.websocket.Session;import javax.websocket.server.ServerEndpoint;import java.util.Set;import java.util.concurrent.CopyOnWriteArraySet;import java.util.concurrent.atomic.AtomicInteger;/** * Created by dushangkui on 2017/6/12. */@ServerEndpoint("/websocket/chat")public class ChatEndpoint {    private static final String GUEST_PREFIX = "访客";    private static final AtomicInteger connectionIds = new AtomicInteger(0);    private static final Set<ChatEndpoint> clientSet = new CopyOnWriteArraySet<ChatEndpoint>();    private final String nickName;    private Session session;    public ChatEndpoint() {        nickName = GUEST_PREFIX + connectionIds.getAndIncrement();    }    @OnOpen    public void start(Session session) {        this.session = session;        clientSet.add(this);        String message = String.format("[%s %s]", nickName, "加入了聊天室！");        broadcast(message);    }    @OnClose    public void end() {        clientSet.remove(this);        String message = String.format("[%s %s]", nickName, "离开了聊天室！");        broadcast(message);    }    @OnMessage    public void recieved(String message) {        String filteredMessaged = String.format("[%s %s]", nickName, filter(message));        broadcast(filteredMessaged);    }    public void onError(Throwable t) {        System.out.println("WebSocket服务端错误 " + t);    }    private static void broadcast(String message) {        for (ChatEndpoint client : clientSet) {            try {                synchronized (client) {                    client.session.getBasicRemote().sendText(message);                }            } catch (Exception e) {                System.out.println("聊天错误，向客户端" + client + "发送消息错误。");                clientSet.remove(client);                try {                    client.session.close();                } catch (Exception t) {                    String msg = String.format("[%s %s]", client.nickName, "已经被断开了连接。");                    broadcast(msg);                }            }        }    }    private static String filter(String message) {        if (message == null) return null;        char[] content = new char[message.length()];        message.getChars(0, message.length(), content, 0);        StringBuilder sb = new StringBuilder(content.length + 50);        for (int i = 0; i < content.length; i++) {            switch (content[i]) {                case '<':                    sb.append("<");                    break;                case '>':                    sb.append(">");                    break;                case '&':                    sb.append("&");                    break;                case '"':                    sb.append(""");                    break;                default:                    sb.append(content[i]);            }        }        return sb.toString();    }}

看页面：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>使用WebSocket通信</title>    <script type="text/javascript">        var websocket = new WebSocket("ws://127.0.0.1:8080/test/websocket/chat")        var sendMsg = function(){            var inputElement = document.getElementById("msg");            websocket.send(inputElement.value);            inputElement.value="";        }        var send = function(event){            if(event.keyCode == 13){                sendMsg();            }        };        websocket.onopen = function(){            websocket.onmessage = function(event){                var show = document.getElementById("show");                show.innerHTML += event.data + "<br>";                show.scrollTop = show.scrollHeight;            }            document.getElementById("msg").onkeydown=send;            document.getElementById("sendBtn").onclick = sendMsg;        }        websocket.onclose = function(){            document.getElementById("msg").onkeydown = null;            document.getElementById("sendBtn").onclick = null;            Console.log("Websocket已经被关闭。");        }    </script></head><body>    <div style="width: 600px; height: 240px; overflow-y: auto; border: 1px solid #333;" id="show"></div>    <input type="text" size="80" id="msg" placeholder="输入聊天记录"/>    <input type="button" value="发送" id="sendBtn"/></body></html>

运行结果：

注意一点儿：Tomcat的版本是8

阅读全文

1 0