美文网首页
Jfinal框架整合webSocket技术功能实现

Jfinal框架整合webSocket技术功能实现

作者: SunshineBo_1227 | 来源:发表于2017-08-19 13:23 被阅读0次

    技术难度:简单
    在这里我会用最简单的方法实现JFinal框架结合webSocket最基础的功能,以至于后续业务的拓展需要小伙伴们依据实际情况去实现相应的开发!
    废话不多说,直接上代码!

    1、编写webSocket类
    package morality.ws;
    import java.io.IOException;
    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("/ws/getsingle")
    public class webSocket {
        private Session session;
    
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
    }
        
    /**  
     * 收到客户端消息时触发
     * @param relationId  
     * @param userCode  
     * @param message  
     * @return  
     * @throws IOException 
     * @throws InterruptedException 
    */  
    @OnMessage
    public void onMessage(Session session, String key) throws IOException {
        //向客户端返回发送过来的消息
        session.getBasicRemote().sendText(key);
    }
    
    /**  
     * 异常时触发
     * @param relationId
     * @param userCode
     * @param session
    */
    @OnError
    public void onError(Throwable throwable,Session session) {}
    
    /**  
     * 关闭连接时触发 
     * @param relationId  
     * @param userCode
     * @param session
    */
    @OnClose
      public void onClose(Session session) {}
    }
    
    2、编写Handler
    package morality.handler;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import com.jfinal.handler.Handler;
    
    public class WebSockethandler extends Handler {
        @Override
        public void handle(String target, HttpServletRequest request,HttpServletResponse response, boolean[] isHandled) {
        // TODO Auto-generated method stub
        if(target.indexOf("/ws/getsingle") == -1){
            next.handle(target, request, response, isHandled);
        }
      }
    }
    

    JFinal将不再处理带有“/ws/getsingle”的请求,交由webSocket处理;

    3、配置Config
    @Override
    public void configHandler(Handlers me) {
        // TODO Auto-generated method stub
        me.add(new WebSockethandler());
    }
    
    4、HTML页面
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8"> <!-- for HTML5 -->
    <title>Java后端WebSocket的Tomcat实现</title>
    </head>
    <body>
        Welcome<br/><input id="text" type="text"/>
        <button onclick="send()">发送消息</button>
        <hr/>
        <button onclick="closeWebSocket()">关闭WebSocket连接</button>
        <hr/>
        <div id="message"></div>
    </body>
    
    <script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/ws/getsingle");
    }
    else {
        alert('当前浏览器 Not support websocket')
    }
    
    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };
    
    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }
    
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }
    
    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }
    
    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }
    
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
    
    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }
    
    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
    </script>
    </html>
    

    那如果一切顺利的话你将看到如下页面:

    webSocket连接成功

    接下来你就可以在input框内输入内容,点击‘发送消息’,内容将显示在页面上:

    成功

    好啦!小伙伴们,这样一个简单的webSocket+Jfinal就搭建成功啦,快来试试吧!

    相关文章

      网友评论

          本文标题:Jfinal框架整合webSocket技术功能实现

          本文链接:https://www.haomeiwen.com/subject/tertdxtx.html