网页实时聊天

本文转载自查看原文 2017-04-06 09:54 1218

整理了一下网页实时聊天的小练习，留着可能用得到

后台代码

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();
                }
            }
        }
    }
}

前台页面：

<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="连接" onclick="chat(this);">
        <input type="button" value="发送" onclick="send(this);" disabled="disabled" id="send_btn" title="Enter发送">
    </div>
</body>


script代码

<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://169.254.77.246:8080/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();
    }

所用jar包：tomcat中lib下的包就足够用了
再加一个javax.mail

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 网页实时聊天之PHP实现websocket 基于websocket的网页实时消息推送与在线聊天（上篇）网页实时聊天之js和jQuery实现ajax长轮询 websocket实时聊天（一） Comet实现的网页聊天程序基于flask的网页聊天室（四）基于flask的网页聊天室（一） Netty+WebSocket简单实现网页聊天网页聊天室制作步骤分享 websocket和原生js实现实时聊天系统