zoukankan      html  css  js  c++  java
  • WebSocket聊天室

    WebSocket可以实现服务端和客户端双向通讯(当然也可以使用signalr),那么接下来做一个简单的聊天室

    创建一个控制台程序,引用包Fleck

    代码如下:

    FleckLog.Level = LogLevel.Debug;
                var allSockets = new List<IWebSocketConnection>();
                var server = new WebSocketServer("ws://0.0.0.0:7181");
    
                server.Start(socket =>
    
                {
    
                    socket.OnOpen = () =>
    
                    {
    
                        Console.WriteLine("Open!");
    
                        allSockets.Add(socket);
    
                    };
    
                    socket.OnClose = () =>
    
                    {
    
                        Console.WriteLine("Close!");
    
                        allSockets.Remove(socket);
    
                    };
    
                    socket.OnMessage = message =>
    
                    {
    
                        Console.WriteLine(message);
    
                        allSockets.ToList().ForEach(s => s.Send("Echo: " + message));
    
                    };
    
                });
    
                var input = Console.ReadLine();
                while (input != "exit")
                {
                    foreach (var socket in allSockets.ToList())
                    {
                        socket.Send(input);
                    }
                    input = Console.ReadLine();
                }

    新建一个web程序,将Index.cshtml改为

        <form id="sendForm">
    
            <input id="sendText" placeholder="Text to send" />
    
        </form>
    
        <pre id="incomming"></pre>
    
        <script type="text/javascript">
     var start = function () {
     var inc = document.getElementById('incomming');
     var wsImpl = window.WebSocket || window.MozWebSocket;
     var form = document.getElementById('sendForm');
     var input = document.getElementById('sendText');
    
     inc.innerHTML += "connecting to server ..<br/>";
    
     // 创建新的websocket新连接端口为7181
     window.ws = new wsImpl('ws://localhost:7181/');
    
     // 当数据从服务器服务中心发送后,继续向下运行过程
     ws.onmessage = function (evt) {
     inc.innerHTML += evt.data + '<br/>';
     };
    
     // 当链接对象找到服务端成功对接后,提示正常打开
     ws.onopen = function () {
     inc.innerHTML += '.. connection open<br/>';
     };
    
     // 当链接对象未找找到服务端成功对接后,提示打开失败,别切单项关闭
     ws.onclose = function () {
     inc.innerHTML += '.. connection closed<br/>';
     }
    
     form.addEventListener('submit', function (e) {
     e.preventDefault();
     var val = input.value;
     ws.send(val);
     input.value = "";
     });
    
     }
     window.onload = start;
        </script>

    运行程序即可,不管是在控制台输入,或者是页面输入都可以

    截图如下:

    记录编程的点滴,体会学习的乐趣
  • 相关阅读:
    读《豆瓣的基础架构》有感
    读《【解密】京东B2B业务架构演变》有感
    soa
    读《京东咚咚架构演进》有感
    读《游戏服务器的架构演进(完整版)》有感
    读《京东物流系统架构演进中的最佳实践》有感
    读《微博众筹的架构设计》有感
    读《新浪微博如何应对极端峰值下的弹性扩容挑战》有感
    读《微博推荐架构的演进》有感
    读《新浪微博用户兴趣建模系统架构》有感
  • 原文地址:https://www.cnblogs.com/AduBlog/p/13596536.html
Copyright © 2011-2022 走看看