首页  |  知识库  |  资源下载  |  在线工具  |  A-Z  •  JAR  •  名词查         

基于Undertow的WebSocket并集合前端JS进行交互实现ChatServer在线聊天功能的代码示例

标签:undertow,在线聊天,websockets,代码例子,聊天室     发布时间:2018-05-07   

一、前言

基于Undertow的io.undertow.Undertow、io.undertow.server、io.undertow.websockets定义后端简单ChatServer聊天服务器,并通过前端HTML基于的ws://通信协议的JS调用进行数据交互,详情参见代码示例部分(项目主要依赖xnio-api-3.3.0.Final.jar [更多其他版本]、xnio-nio-3.3.0.Final.jar包 [更多其他版本] )。

二、代码示例

1.ChatServer服务类

package test.undertow;@b@@b@import io.undertow.Undertow;@b@import io.undertow.server.handlers.resource.ClassPathResourceManager;@b@import io.undertow.websockets.WebSocketConnectionCallback;@b@import io.undertow.websockets.core.AbstractReceiveListener;@b@import io.undertow.websockets.core.BufferedTextMessage;@b@import io.undertow.websockets.core.WebSocketChannel;@b@import io.undertow.websockets.core.WebSockets;@b@import io.undertow.websockets.spi.WebSocketHttpExchange;@b@import static io.undertow.Handlers.path;@b@import static io.undertow.Handlers.resource;@b@import static io.undertow.Handlers.websocket;@b@@b@@UndertowExample("Chat")@b@public class ChatServer {@b@@b@    public static void main(final String[] args) {@b@@b@        System.out.println("To see chat in action is to open two different browsers and point them at http://localhost:8080");@b@@b@        Undertow server = Undertow.builder()@b@                .addHttpListener(8080, "localhost")@b@                .setHandler(path()@b@                        .addPrefixPath("/myapp", websocket(new WebSocketConnectionCallback() {@b@@b@                            @Override@b@                            public void onConnect(WebSocketHttpExchange exchange, WebSocketChannel channel) {@b@                                channel.getReceiveSetter().set(new AbstractReceiveListener() {@b@@b@                                    @Override@b@                                    protected void onFullTextMessage(WebSocketChannel channel, BufferedTextMessage message) {@b@                                        final String messageData = message.getData();@b@                                        for (WebSocketChannel session : channel.getPeerConnections()) {@b@                                            WebSockets.sendText(messageData, session, null);@b@                                        }@b@                                        System.out.println("message event data -------------------------:"+messageData);@b@                                    }@b@                                });@b@                                channel.resumeReceives();@b@                            }@b@@b@                        }))@b@                        .addPrefixPath("/", resource(new ClassPathResourceManager(ChatServer.class.getClassLoader(), ChatServer.class.getPackage()))@b@                                .addWelcomeFiles("index.html")))@b@                .build();@b@@b@        server.start();@b@    }@b@@b@}
package test.undertow;@b@@b@import java.lang.annotation.ElementType;@b@import java.lang.annotation.Retention;@b@import java.lang.annotation.RetentionPolicy;@b@import java.lang.annotation.Target;@b@@b@ @b@@Retention(RetentionPolicy.RUNTIME)@b@@Target(ElementType.TYPE)@b@public @interface UndertowExample {@b@    String value();@b@    String location() default "http://localhost:8080";@b@}

2.前端H5对应JS调用代码

<!--@b@  ~ JBoss, Home of Professional Open Source.@b@  ~ Copyright 2014 Red Hat, Inc., and inpidual contributors@b@  ~ as indicated by the @author tags.@b@  ~@b@  ~ Licensed under the Apache License, Version 2.0 (the "License");@b@  ~ you may not use this file except in compliance with the License.@b@  ~ You may obtain a copy of the License at@b@  ~@b@  ~     http://www.apache.org/licenses/LICENSE-2.0@b@  ~@b@  ~  Unless required by applicable law or agreed to in writing, software@b@  ~  distributed under the License is distributed on an "AS IS" BASIS,@b@  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.@b@  ~  See the License for the specific language governing permissions and@b@  ~  limitations under the License.@b@  -->@b@@b@<html>@b@<head><title>Undertow Chat</title>@b@<script>@b@    var socket;@b@    if (window.WebSocket) {@b@        socket = new WebSocket("ws://localhost:8080/myapp");@b@        socket.onmessage = function (event) {@b@            var chat = document.getElementById('chat');@b@            chat.innerHTML = chat.innerHTML + event.data + "<br />";@b@        };@b@    } else {@b@        alert("Your browser does not support Websockets. (Use Chrome)");@b@    }@b@@b@    function send(message) {@b@        if (!window.WebSocket) {@b@            return false;@b@        }@b@        if (socket.readyState == WebSocket.OPEN) {@b@            socket.send(message);@b@        } else {@b@            alert("The socket is not open.");@b@        }@b@        return false;@b@    }@b@</script>@b@<style type="text/css">@b@    html,body {width:100%;height:100%;}@b@    html,body,ul,ol,dl,li,dt,dd,p,blockquote,fieldset,legend,img,form,h1,h2,h3,h4,h5,h6 {margin:0;padding:0;}@b@    body {@b@        font:normal 12px/1.5 Arial,Helvetica,'Bitstream Vera Sans',sans-serif;@b@        background: #c5deea; /* Old browsers */@b@        background: -moz-linear-gradient(top, #c5deea 0%, #066dab 100%); /* FF3.6+ */@b@        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c5deea), color-stop(100%, #066dab)); /* Chrome,Safari4+ */@b@        background: -webkit-linear-gradient(top, #c5deea 0%, #066dab 100%); /* Chrome10+,Safari5.1+ */@b@        background: -o-linear-gradient(top, #c5deea 0%, #066dab 100%); /* Opera 11.10+ */@b@        background: -ms-linear-gradient(top, #c5deea 0%, #066dab 100%); /* IE10+ */@b@        background: linear-gradient(to bottom, #c5deea 0%, #066dab 100%); /* W3C */@b@        height: 90%;@b@    }@b@@b@    .center {@b@        margin-left: auto;@b@        margin-right: auto;@b@        width: 70%;@b@        background: white;@b@    }@b@@b@    .chatform {@b@        margin-left: auto;@b@        margin-right: auto;@b@        margin-bottom: 0;@b@        width: 70%;@b@    }@b@    form{@b@        width: 100%;@b@    }@b@    label{@b@        display: inline;@b@        width: 100px;@b@    }@b@    #msg{@b@        display: inline;@b@        width: 100%;@b@    }@b@@b@</style>@b@</head>@b@<body>@b@<p class="page">@b@    <p class="center" >@b@        <h1>Web Socket Chat</h1>@b@        <p id="chat" style="height:100%;width: 100%; overflow: scroll;">@b@@b@@b@        </p>@b@@b@        <form onsubmit="return false;" class="chatform" action="">@b@            <label for="msg">Message</label>@b@            <input type="text" name="message" id="msg"  onkeypress="if(event.keyCode==13) { send(this.form.message.value); this.value='' } " />@b@        </form>@b@    </p>@b@</p>@b@</body>@b@</html>

3.测试运行效果如下图所示

基于Undertow的WebSocket并集合前端JS进行交互实现ChatServer在线聊天功能的代码示例