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

相关推荐
掘金安东尼3 小时前
让 JavaScript 更容易「善后」的新能力
前端·javascript·面试
掘金安东尼3 小时前
用 HTMX 为 React Data Grid 加速实时更新
前端·javascript·面试
灵感__idea5 小时前
Hello 算法:众里寻她千“百度”
前端·javascript·算法
yinuo6 小时前
轻松接入大语言模型API -04
前端
袋鼠云数栈UED团队6 小时前
基于 Lexical 实现变量输入编辑器
前端·javascript·架构
cipher7 小时前
ERC-4626 通胀攻击:DeFi 金库的"捐款陷阱"
前端·后端·安全
UrbanJazzerati7 小时前
非常友好的Vue 3 生命周期详解
前端·面试
AAA阿giao7 小时前
从零构建一个现代登录页:深入解析 Tailwind CSS + Vite + Lucide React 的完整技术栈
前端·css·react.js
亦妤7 小时前
JS执行机制、作用域及作用域链
javascript
兆子龙8 小时前
像 React Hook 一样「自动触发」:用 Git Hook 拦住忘删的测试代码与其它翻车现场
前端·架构