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

相关推荐
JellyDDD1 分钟前
h5上传大文件可能会导致手机浏览器卡死,重新刷新的问题
javascript·上传文件
闲人编程6 分钟前
健康检查与就绪探针
kubernetes·web·状态机·健康检查·codecapsule·存活探针·启动探针
Rover.x18 分钟前
Netty基于SpringBoot实现WebSocket
spring boot·后端·websocket
废春啊32 分钟前
前端工程化
运维·服务器·前端
爱上妖精的尾巴33 分钟前
6-9 WPS JS宏Map、 set、get、delete、clear()映射的添加、修改、删除
前端·wps·js宏·jsa
爱分享的鱼鱼1 小时前
对比理解 Vue 响应式 API:data(), ref、reactive、computed 与 watch 详解
前端·vue.js
JS_GGbond1 小时前
【性能优化】给Vue应用“瘦身”:让你的网页快如闪电的烹饪秘籍
前端·vue.js
T___T1 小时前
一个定时器,理清 JavaScript 里的 this
前端·javascript·面试
代码小学僧1 小时前
从 Arco Table 迁移到 VTable:VTable使用经验分享
前端·react.js·开源
微笑的曙光1 小时前
Vue3 环境搭建 5 步走(零基础友好)
前端