用 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、开源仓库

相关推荐
panxianren5 小时前
Bun 1.4 的 bun test --parallel 将 4 秒的测试套件缩短到约 1 秒
java·javascript
陈随易7 小时前
bm2,Node.js 与 Bun 项目部署新选择
前端·后端·程序员
可乐鸡翅yeah_8 小时前
FFmpeg 生成 HLS 独立分片 independent‑segments 参数到底有什么用
javascript·ffmpeg·音视频·safari·m3u8
福兮说8 小时前
canvas 旋转图片的六个坑:四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了
前端·javascript·图像处理·canvas
Ai-_Man10 小时前
您您这可以把Grok的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑
传人once10 小时前
多图片上传预览功能如何写
前端·css·html·jquery·html5
Eric.4610 小时前
Wan‑Animate+MiniMax-H3 本地部署 AI 漫剧流水线:8G 显存动作迁移与动态分镜工程实战
前端·人工智能·comfyui·ai漫剧
liangshanbo121510 小时前
JavaScript 异步核心主线
javascript·事件循环·异步操作
DP DPharness11 小时前
StudyMate 从安装到第一节课的完整操作路径
人工智能·websocket·网络协议·智能手机·dpharness
传人once12 小时前
悬停旋转放大和位移效果如何写
javascript·css·动画