美文网首页
HTML5 WebSocket使用详解

HTML5 WebSocket使用详解

作者: smile_2de5 | 来源:发表于2017-08-21 09:04 被阅读0次

    1.使用Ider+Tomcat8环境进行演示  参考:http://blog.csdn.net/admin_yi/article/details/54375220

    2.创建一个Servlet用于接收客户端的请求数据,并进行处理

    <pre>

    packagecom.dong.base.serlvet;

    /**

    * Created by Administrator on 2017/8/21.

    */

    importjava.io.IOException;

    importjavax.websocket.OnClose;

    importjavax.websocket.OnMessage;

    importjavax.websocket.OnOpen;

    importjavax.websocket.Session;

    importjavax.websocket.server.ServerEndpoint;

    /**

    * 在tomcat7中存在WebSocketServlet类(但已经过时),在tomcat8中彻底删除

    * 此处使用@ServerEndpoint注解,主要是将目前的类定义成一个websocket服务器端

    * 注解的值将被用于监听用户连接的终端访问URL地址

    */

    @ServerEndpoint("/websocket")

    public classWebSocketTest {

    /**

    * 当服务器接收到客户端发送的消息时所调用的方法

    * 该方法可能包含一个javax.websocket.Session可选参数

    * 如果有这个参数,容器将会把当前发送消息客户端的连接Session注入进去

    */

    @OnMessage

    public voidonMessage(String message,Session session)throwsIOException, InterruptedException {

    // 打印从客户端获取到的信息

    System.out.println("从客户端接收到的信息: "+ message);

    //向客户端第一次发送信息

    session.getBasicRemote().sendText("=======向客户端第一次发送信息=======");

    //每秒向客户端发送一次信息,连续发送3次

    intsentMessages =0;

    while(sentMessages <3) {

    Thread.sleep(1000);

    session.getBasicRemote().sendText("即时发送信息,当前是第 "+ sentMessages+"次…");

    sentMessages++;

    }

    // 向客户端发送最后一次信息

    session.getBasicRemote().sendText("=======向客户端发送最后一次信息=======");

    }

    /**

    * 当一个新用户连接时所调用的方法

    * 该方法可能包含一个javax.websocket.Session可选参数

    * 如果有这个参数,容器将会把当前发送消息客户端的连接Session注入进去

    */

    @OnOpen

    public voidonOpen(Session session) {

    System.out.println("客户端连接成功");

    }

    /** 当一个用户断开连接时所调用的方法*/

    @OnClose

    public voidonClose() {

    System.out.println("客户端关闭");

    }

    }

    </pre>

    3.在HTML5 页面中使用WebSocket与服务器端进行交互

    HTML5 WebSocket测试

    varwebSocket=newWebSocket('ws://localhost:8080/WebSocket/websocket');

    webSocket.onerror=function(event) {

    alert(event.data);

    };

    //与WebSocket建立连接

    webSocket.onopen=function(event) {

    document.getElementById('messages').innerHTML='与服务器端建立连接';

    };

    //处理服务器返回的信息

    webSocket.onmessage=function(event) {

    document.getElementById('messages').innerHTML += '
    '+ event.data;

    };

    function start() {

    //向服务器发送请求

    webSocket.send('我是jCuckoo');

    }

    相关文章

      网友评论

          本文标题:HTML5 WebSocket使用详解

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