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>

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

截图如下:

WebSocket聊天室

WebSocket聊天室

上一篇:面试之web存储


下一篇:js 获取当前时间并格式化