JS通过WebSocket实现前后端通信实例

最新推荐文章于 2024-07-29 07:27:12 发布

张三少

最新推荐文章于 2024-07-29 07:27:12 发布

阅读量3.3w

点赞数 4

分类专栏： javascript

本文链接：https://blog.csdn.net/github_39532240/article/details/85330232

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、WebSocket是什么？
WebSocket是一种网络通信协议，一种由HTML5 开始提供的、在单个 TCP 连接上进行全双工通讯的协议。它和HTTP协议的最大区别在于：HTTP 协议是一种无状态的、无连接的、单向的应用层协议当客户端想要知道服务端的变化时，HTTP协议必须使用“轮询”的方式，效率很低；而WebSocket只需一次连接，便可以让服务端直接向客户端推送信息，从而告别轮询。

下面来构建一个基于JS的WebSocket通信实例：

2、服务端
为与客户端一致，后端引入ws模块，构建服务器，监听对应事件，具体代码如下：

var ws = require("ws"); // 加载ws模块;

// 启动websocket服务器
var wsServer = new ws.Server({
    host: "127.0.0.1",
    port: 8183,
});
console.log('WebSocket sever is listening at port localhost:8183');

// 建立连接，监听客户端请求，绑定对应事件;
function on_server_client_comming (wsObj) {
    console.log("request comming");
    websocket_add_listener(wsObj);
}
wsServer.on("connection", on_server_client_comming);

// 各事件处理逻辑
function websocket_add_listener(wsObj) {
    wsObj.on("message", function(data) {
        console.log("request data:"+data);
        setTimeout(()=>{ //收到请求，回复
            wsObj.send("1秒延时，收到了，正在处理");
        },1000);
        /*****
         * 处理业务逻辑
         */
        setTimeout(()=>{ //完成请求，回复
            wsObj.send("3秒延时，返回数据，关闭连接");
            wsObj.close()
        },3000);
    });

    wsObj.on("close", function() {
        console.log("request close");
    });

    wsObj.on("error", function(err) {
        console.log("request error", err);
    });
}

运行该js构建服务器,结果如下：
在这里插入图片描述

3、客户端
支持H5的浏览器均内置WebSocket 对象，直接引用即可，具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Test</title>
</head>
<body>
<script>
    var wsObj = new WebSocket("ws://127.0.0.1:8183");   //建立连接
    wsObj.onopen = function(){  //发送请求
        alert("open");
        wsObj.send("Hello WebSocket");
    };
    wsObj.onmessage = function(ev){  //获取后端响应
        alert(ev.data);
    };
    wsObj.onclose = function(ev){
        alert("close");
    };
    wsObj.onerror = function(ev){
        alert("error");
    };
</script>
</body>
</html>

在浏览器中打开该页面，依次看到如下结果
在这里插入图片描述