逍遥带你玩WebSocket

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。具体怎么玩直接带你上代码

HTML部分

<html>
  <head>
    <meta charset="UTF-8">
    <title>测试WS</title>
  </head>
  <body>
    测试WebSocket
    <input id="msg" type="text">
    <p>
      <input type="button" value="开启连接" onclick="openWS();">
      <input type="button" value="发送数据" onclick="sendData();">
      <input type="button" value="关闭连接" onclick="closeWS();">
    </p>
    <script>
        var ws = null;
        var tx = document.getElementById("msg");

        function openWS() {
            /*
              创建一个WebSocket客户端对象,连接本地的/ws资源
              该对象需要浏览器支持
            */
            ws = new WebSocket("ws://localhost/ws");
            //当连接成功时调用该函数
            ws.onopen = function() {
                console.log("open");
            };
            //当收到数据时调用该函数
            ws.onmessage = function(evt) {
                console.log(evt.data)
            };
            //当连接关闭时调用该函数
            ws.onclose = function(evt) {
                console.log("WebSocketClosed!");
            };
        }

        function sendData() {
           //使用WebSocket发送数据
           ws.send(tx.value);
        }

        function closeWS() {
             //关闭WebSocket
            ws.close();
        }
    </script>
  </body>
</html>

界面效果

index.html
此时我们并不能去点击界面上的按钮，后台的代码我们现在还没有写，那么我们就使用Tomcat来实现一个后台的WebSocket服务端，首先我们要先导入jar包，位于Tomcat根/lib/websocket-api.jar
IDEA中环境搭建

Java代码

package cn.wolfcode.ws;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/ws") //当前类交给Tomcat管理用于处理WebSocket
public class WebScoketDemo {

    @OnOpen //@OnOpen当前有客户端连入调用的方法
    public void open(Session session) throws Exception {
        //往客户端发送“连接websocket成功”
        session.getBasicRemote().sendText("连接websocket成功");
    }

    @OnMessage //@OnMessage当收到客户端信息调用的方法
    public void sendMsg(Session session, String msg, boolean last)
            throws Exception {
        System.out.println(msg);
        msg = "WS:" + msg;
        //往客户端发送数据
        session.getBasicRemote().sendText(msg, last);
    }

    @OnClose //@OnClose当客户端断开时调用的方法
    public void close() throws Exception {
        System.out.println("关闭websocket");
    }
}

然后启动服务器，来访问/index.html资源，点击上面的按钮：

观察浏览器控制台的效果

点击开启连接
点击发送数据

点击关闭连接

逍遥带你玩WebSocket

HTML部分

界面效果

Java代码

观察浏览器控制台的效果

猜你喜欢