用 Socket.D 替代原生 WebSocket 做前端开发

socket.d.js 是基于 websocket 包装的 socket.d 协议的实现。就是用 ws 传输数据,但功能更强大。

功能 原生 websocket socket.d 说明
listen 监听消息
send 发消息
sendAndRequest 发消息并接收一个响应(类似于 http)
sendAndSubscribe 发消息并接收多个响应(也叫订阅)
event(or path) 消息有事件或路径(可对消息,进行业务路由)
meta(or header) 消息有元信息或头信息(可为数据,标注业务语义)
自动心跳
断开后自动重链

下面感受下开发方面的差异!

1、客户端示例代码

使用时,可以根据自己的业务对原生接口包装,进一步简化使用。

html 复制代码
<script src="js/socket.d.js"></script>
<script>
async function init(){
    //构建事件监听
    const eventListener = await SocketD.newEventListener().doOnMessage((s,m)=>{
       //监听所有消息(可能不需要)
    }).doOn("/im/user.upline", (s,m)=>{ //事件的应用
        //监听用户上线
        let user_id = m.meta("user_id");
    }).doOn("/im/user.downline", (s,m)=>{
        //监听用户下线
         let user_id = m.meta("user_id"); //元信息的应用
    });

    //创建单例
    window.clientSession = SocketD.createClient("sd:ws://127.0.0.1:8602/?u=a&p=2")
            .listen(eventListener)
            .open();
}

function join(){
    clientSession.sendAndRequest("/user/join", SocketD.newEntity()).thenReply(r->{
        //加入成功
    });
}

init();
</script>

Socket.D 有三个发消息的接口:

接口 说明
send 像 websocket。多了事件与元信息属性
sendAndRequest 像 http
sendAndSubscribe 像 reactive stream 。多了事件与元信息属性

2、服务端示例代码(用 java 演示)

java 复制代码
public class Demo {
    public static void main(String[] args) throws Throwable {
        List<Session> userSessions = new ArrayList<Session>();
        //创建监听器
        Listener listener = new EventListener().doOnOpen(s->{
            //鉴权
            if("a".equals(s.param("u")) == false){
                s.close();
            }else{
                //加入用户表
                s.attrPut("user_id", s.param("u"));
                userSessions.add(s);
            }
        }).doOn("/user/join", (s,m)->{
            if(m.isRequest()){
                s.reply(m, new StringEntity());
            }
            
            for(Session s1: userSessions){
                //告诉所有用户,有人上线
                s1.send("/im/user.upline", new StringEntity().metaPut("user_id"), s.attr("userId"));
            }
        });
        
        //启动服务
        SocketD.createServer("sd:ws")
                .config(c -> c.port(8602))
                .listen(listener)
                .start();
    }
}

3、Socket.D 是什么东东?

Socket.D 是一个基于"事件"和"语义消息""流"的网络应用层协议(听起来好像很 ao 口)。支持 tcp, udp, ws, kcp 传输(有各种不同语言的实现)。有用户说,"Socket.D 之于 Socket,尤如 Vue 之于 Js、Mvc 之于 Http"。

协议之所有强大,有三个关键基础因素:

  • 事件
  • 语义消息

它的帧码结构:

复制代码
[len:int][flag:int][sid:str(<64)][\n][event:str(<512)][\n][metaString:str(<4k)][\n][data:byte(<16m)]

因为是应用层协议,所以可以建立在任意传输层协议之上。比如 websocket。

4、开源仓库

相关推荐
想吃火锅10052 小时前
【leetcode】405.数字转换为十六进制数js
开发语言·javascript·ecmascript
原则猫4 小时前
HOOKS 背后机制
前端
码语智行4 小时前
首页导航跳转功能深度解析-系统内和系统外
前端
阿猫的故乡4 小时前
Vue过渡动画从入门到装X:淡入淡出、滑动、列表动画、第三方库全搞定
前端·javascript·vue.js
IManiy5 小时前
总结之Vibe Coding前端骨架
前端
小和尚敲木头5 小时前
vue3 vite动态拼接图片路径
javascript
JS菌5 小时前
AI Agent 沙箱双层防护体系:从权限过滤到内核隔离的完整实现
前端·人工智能·后端
Aphasia3115 小时前
从输入URL到页面展示全流程
前端·面试
我叫黑大帅5 小时前
前端如何竖屏固定视口背景
前端·javascript·面试
abcy0712135 小时前
python pandas csv异步后台清洗前端优先返回成功信息
前端·python·pandas