WebSocket实现“多人”简单聊天室

最新推荐文章于 2024-04-29 21:45:45 发布

count2014

最新推荐文章于 2024-04-29 21:45:45 发布

阅读量1.2k

点赞数

分类专栏： java javascript 文章标签：多人聊天室 java js html

java 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

话不多说，直接上代码。。。

1.java后台代码

package www.test;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
 
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
 
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;
 
@WebServlet("/chat")
public class ChatWebSocketServlet extends WebSocketServlet {
    private final Map<Integer, WsOutbound> map = new HashMap<Integer, WsOutbound>();
    private static final long serialVersionUID = -1058445282919079067L;
    @Override
    protected StreamInbound createWebSocketInbound(String arg0, HttpServletRequest request) {
        // StreamInbound：基于流的WebSocket实现类(带内流)，应用程序应当扩展这个类并实现其抽象方法onBinaryData和onTextData。
        return new ChatMessageInbound();
    }
    class ChatMessageInbound extends MessageInbound {
        // MessageInbound：基于消息的WebSocket实现类(带内消息)，应用程序应当扩展这个类并实现其抽象方法onBinaryMessage和onTextMessage。
        @Override
        protected void onOpen(WsOutbound outbound) {
            map.put(outbound.hashCode(), outbound);
            super.onOpen(outbound);
        }
        @Override
        protected void onClose(int status) {
            map.remove(getWsOutbound().hashCode());
            super.onClose(status);
        }
        @Override
        protected void onBinaryMessage(ByteBuffer buffer) throws IOException {
        }
        @Override
        protected void onTextMessage(CharBuffer buffer) throws IOException {
            String msg = buffer.toString();
            Date date = new Date();
            SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss.SSS");
            msg = " <font color=green>匿名用戶  " + sdf.format(date) + "</font><br/> " + msg;
            broadcast(msg);
        }
        private void broadcast(String msg) {
            Set<Integer> set = map.keySet();
            for (Integer integer : set) {
                WsOutbound outbound = map.get(integer);
                CharBuffer buffer = CharBuffer.wrap(msg);
                try {
                    outbound.writeTextMessage(buffer);
                    outbound.flush();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

2.html和js代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多人聊天室</title>
</head>
<body>
	 <h2 align="center">欢迎来到聊天室</h2>
    <div align="center">
        <div id="chat">
            <div id="up"></div>
            <div id="down">
                <textarea type="text" id="text" style="width: 100%; height: 40px;"></textarea>
            </div>
        </div>
        <input type="button" value="连接" οnclick="chat(this);">
        <input type="button" value="发送" οnclick="send(this);" disabled="disabled" id="send_btn" title="Enter发送">
    </div>
    <script type="text/javascript">
	    var socket;
	    var receive_text = document.getElementById("up");
	    var send_text = document.getElementById("text");
	    function addText(msg) {
	        receive_text.innerHTML += "<br/>" + msg;
	        receive_text.scrollTop = receive_text.scrollHeight;
	    }
	    var chat = function(obj) {
	        obj.disabled = "disabled";
	        socket = new WebSocket('ws://IP地址:8088/chat/chat');
	        receive_text.innerHTML += "<font color=green>正在连接服务器……</font>";
	        //打开Socket 
	        socket.onopen = function(event) {
	            addText("<font color=green>连接成功！</font>");
	            document.getElementById("send_btn").disabled = false;
	            send_text.focus();
	            document.onkeydown = function(event) {
	                if (event.keyCode == 13 && event.ctrlKey) {
	                    send();
	                }
	            }
	        };
	        socket.onmessage = function(event) {
	            addText(event.data);
	        };
	 
	        socket.onclose = function(event) {
	            addText("<font color=red>连接断开！</font>");
	            obj.disabled = "";
	        };
	        if (socket == null) {
	            addText("<font color=red>连接失败！</font>");
	        }
	    };
	    var send = function(obj) {
	        if (send_text.value == "") {
	            return;
	        }
	        socket.send(send_text.value);
	        send_text.value = "";
	        send_text.focus();
	    }
    </script>
</body>
</html>

3.效果图

count2014

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
WebSocket实现“多人”简单聊天室

话不多说，直接上代码。。。1.java后台代码package www.test;import java.io.IOException;import java.nio.ByteBuffer;import java.nio.CharBuffer;import java.text.SimpleDateFormat;import java.util.Date;import java.util...
复制链接

扫一扫