zoukankan      html  css  js  c++  java
  • java web使用WebSocket

    一.WebSocket是什么

    1.概念

      WebSocket协议是基于TCP的一种新的网络协议,它实现了浏览器与服务器双全工(full-duplex)通信——允许服务器主动发送信息给客户端。

    2.实现原理

      在实现WebSocket连线过程中,需要通过浏览器发出WebSocket连线请求,然后服务器发出回应,这个过程通常称为“握手”。在WebSocket API,浏览器和服务器只需要做一个握手的动作,然后浏览器和服务器之间就形成了一条快速通道,两者间就可以直接互相传送数据。

    二.在java web使用WebSocket

    1.创建一个jsp项目

      往简单来说,就是用idea创建一个maven项目 ,add support为web application的项目。

     2.maven添加WebSocket库

    <dependencies>
        <dependency>
            <groupId>javax.websocket</groupId>
            <artifactId>javax.websocket-api</artifactId>
            <version>1.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

    3.声明WebSocket类

    import javax.websocket.*;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    
    @ServerEndpoint(value = "/websocketTest/{userId}")
    public class TestWebSocket {
    
        private static String userId;
    
        //连接时执行
        @OnOpen
        public void onOpen(@PathParam("userId") String userId, Session session) throws IOException {
            this.userId = userId;
            System.out.println("新连接:" + userId);
        }
    
        //关闭时执行
        @OnClose
        public void onClose() {
            System.out.println("连接:" + this.userId + " 关闭");
        }
    
        //收到消息时执行
        @OnMessage
        public void onMessage(String message, Session session) throws IOException {
            System.out.println("收到用户" + this.userId + "的消息" + message);
            session.getBasicRemote().sendText("收到 " + this.userId + " 的消息 "); //回复用户
        }
    
        //连接错误时执行
        @OnError
        public void onError(Session session, Throwable error) {
            System.out.println("用户id为:" + this.userId + "的连接发送错误");
            error.printStackTrace();
        }
    }

      使用@ServerEndpoint来声明接口:@serverEndpoint(value=“/websocket/{paraName}”);其中“{}”用来表示带参数的连接,如果需要获取{}参数,可以在方法中添加@PathParam("paraName") 。连接地址格式为:ws://localhost:8080/projectName/websocket/abc。

      Session代表的是两个WebSocket端点的会话。当WebSocket握手成功后,WebSocket就会提供一个打开的session,可以通过这个session来对另一个端点发送数据。如果这个session关闭了,那发送数据将会报错。

    4.前端代码

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
    websocket Demo---- user000 <br />
    <input id="text" type="text" />
    <button onclick="send()"> Send </button>
    <button   onclick="closeWebSocket()"> Close </button>
    <div id="message">   </div>
    
    <script type="text/javascript">
      //判断当前浏览器是否支持WebSocket
      if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8080/test/websocketTest/user000");
        console.log("link success")
      }else{
        alert('Not support websocket')
      }
    
      //连接发生错误的回调方法
      websocket.onerror = function(){
        setMessageInnerHTML("error");
      };
    
      //连接成功建立的回调方法
      websocket.onopen = function(event){
        setMessageInnerHTML("open");
      }
      console.log("-----")
      //接收到消息的回调方法
      websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
      }
    
      //连接关闭的回调方法
      websocket.onclose = function(){
        setMessageInnerHTML("close");
      }
    
      //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
      window.onbeforeunload = function(){
        websocket.close();
      }
    
      //将消息显示在网页上
      function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
      }
    
      //关闭连接
      function closeWebSocket(){
        websocket.close();
      }
    
      //发送消息
      function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
      }
    </script>
    
    </body>
    </html>

      在前端打开WebSocket,根据地址和后端交互。

    websocket = new WebSocket("ws://localhost:8080/test/websocketTest/user000");

      注意上面这一段中的test是这个项目在tomcat设置的启动地址名称。

    5.测试运行

      在浏览器打开页面后,就立即进行了连接。建立了连接,在前端发送数据,然后就接收到后端返回的信息。

       在后端可以看到连接的建立和接收到的信息。

     三.总结

      1.WebSocket建立连接后,通信就是全双工模式,客户端和服务端就可以在任何时间里自由发送数据。适合于服务端要主动推送实时数据的场景。

  • 相关阅读:
    多个DataTable的合并成一个新表
    into #临时表的用法
    触发器获取更新前的数据
    C# 多个CSV文件合并成一个文件
    group by 字段名 with ROLLUP
    删除DataTable重复列,只针对删除其中的一列重复的行(转)
    动态注册jS
    JS 验证
    导出Excel
    C# 导入多个工作薄文件
  • 原文地址:https://www.cnblogs.com/shadoll/p/14729839.html
Copyright © 2011-2022 走看看