Avalonia跨平台入门第四十四篇之WebSocket

最新推荐文章于 2024-10-17 09:34:17 发布

dotNET跨平台

最新推荐文章于 2024-10-17 09:34:17 发布

阅读量58

点赞数

文章标签： websocket 网络协议网络

原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654100108&idx=6&sn=4bc30a8f0b6523574a397a927e940767&chksm=81277959ac5b4c5ee9f6ff97184151476476090e90daf39e982b5648d7ff18ffb39d4ab37df0&scene=126&sessionid=0

版权

本来使用Avalonia玩耍跨平台还挺有意思,结果上面又给加了个移动套餐;本想着还是原来的思路满足一下呗;但是又想着玩点新玩具,这不咱就玩点不一样的玩具了;于是就在客户端的基础上了来了个简单对外服务用于浏览器的支持;

1、来看看在移动端效果:

2、直接HttpListener玩玩白:

public void StartHttpServer()
{
    _httpListener = new HttpListener();
    //你可以通过使用`+`符号来实现这一点，这样你的应用程序将监听所有IP地址上的指定端口。
    _httpListener.Prefixes.Add("http://+:9999/");
    _httpListener.Start();
    Task.Run(() => HandleRequests());
}

3、前端js直接玩耍WebSocket:

// 构建 WebSocket URL
 const socketUrl = `${protocol}://${host}:${port}/`;
 // 创建一个WebSocket连接
 socket = new WebSocket(socketUrl);
 // 监听连接打开事件
 socket.addEventListener('open', (event) => {
     console.log('WebSocket is open now.');
 });
 // 监听消息事件
 socket.addEventListener('message', (event) => {
     console.log('Message from server: ', event.data);
     // 使用 JSON.parse 将 JSON 字符串解析为对象
     const data = JSON.parse(event.data);
     console.log('Message from server: ', data);
     // 现在你可以访问 data 对象中的属性
     const devices = data.devices;
     devices.forEach(device => {
         const panel = createPanel(device);
         panelContainer.appendChild(panel);
         // 为每个面板添加点击事件监听器
         panel.addEventListener('click', function (event) {
             if (event.target.closest('.panel-header')) {
                 this.classList.toggle('expanded');
                 document.querySelectorAll('.panel').forEach(p => {
                     if (p !== this) {
                         p.classList.remove('expanded');
                     }
                 });
             }
         });
     });
 });

4、后端对于连接的客户端直接发送消息:

public override void OnWsConnected(HttpRequest request)
{
    Console.WriteLine($"Chat WebSocket session with Id {Id} connected!");
    // Send invite message
    string  message = "json数据";
    try
    {
        this.SendTextAsync(message);
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex.Message);
    }
}

最终简单的效果先这样吧;以后有时间的话,可以再去摸索一下更复杂的效果;编程不息、Bug不止、无Bug、无生活;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直