webSocket前台实现

最新推荐文章于 2025-05-19 07:31:32 发布

WX7251

最新推荐文章于 2025-05-19 07:31:32 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/WX5991/article/details/79108316

使用Vertx创建WebSocket服务器，监听20000端口。当连接建立时，接收客户端消息并发送响应。简单示例展示了WebSocket的连接处理和消息传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webSocket前台实现

简单实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="js/base64.js"></script>
    <script>
        var wsUri="ws:127.0.0.1:20000";
        var output;
        function init(e){
            output=document.getElementById("output");
            testWebSocket();
        }
        function testWebSocket(){
            websocket=new WebSocket(wsUri);
            //与服务器连接成功
            websocket.onopen=function(evt){
                onOpen(evt);
            }
            //服务器端关闭
            websocket.onclose = function(evt) {
                onClose(evt)
            };
            //接受传过来的数据
            websocket.onmessage = function(evt) {
                onMessage(evt)
            };
            //发送失败错误提示
            websocket.onerror = function(evt) {
                onError(evt)
            };
        }
        function onOpen(evt){
            document.getElementById("output").value="[user:127.0.0.1]#";
            doSend("WebSocket rocks");
        }
        function onClose(evt) {
            writeToScreen("DISCONNECTED");
        }

        function onMessage(evt) {
//            var b=new Base64();
//            alert(b.decode(evt.data));
            writeToScreen('<span style="color: blue;">RESPONSE: '+ evt.data+'</span>');
        }

        function onError(evt) {
            writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data);
        }

        function doSend(message) {
            if(websocket.readyState==1){
                alert("连接成功");
                websocket.send(message);
                setTimeout(function(){
                    if(websocket.readyState==1){
                        alert("无需尝试发送!");
                    }else{
                        alert("尝试发送");
                        doSend(message);
                    }
                },1000);
            }

        }
        function writeToScreen(message){
            var pre=document.createElement("p");
            pre.style.wordWrap="break-word";
            pre.innerHTML=message;
        }
        document.onkeydown=function(e){
            var keycode=e.keyCode;
            if(keycode==13){
                doSend(document.getElementById("output").value);
            }
        }
        window.addEventListener("load",init,false);
    </script>
</head>
<body>
</body>
<h2>WebSocket Test</h2>
<input   id="output" style="width: 300px;height: 100px;background: black;color: whitesmoke;"></input>
</html>

vertx后台监听简单实现:

Vertx vertx=Vertx.vertx();
vertx.createHttpServer().websocketHandler(res->{
ServerWebSocket server=res.resume();
server.handler(v->{
System.out.println(v);
});
server.write(Buffer.buffer("HTTP/1.1 101 Switching Protocols\nUpgrade: websocket\nConnection:Upgrade\nSec-WebSocket-Accept:izP3aDUEV5674E3AhIay4m1jU1c=\n\n\n".getBytes()));
System.out.println(server.path());
server.writeTextMessage("123");
}).listen(20000,res->{
if(res.succeeded()){
System.out.println("success");
}else{
System.out.println("fail");
}
});