C# WebSocket realizes simple chat room

background

There was a Tcp communication tutorial before. That one was about PC-to-PC communication. This one is about PC-to-browser communication. The bottom layer is actually based on the Tcp communication protocol.

start

1. Create a console application, frame selection 4.7.2

2. Enter Nuget to install the Fleck library

3. Modify Program.cs code

using System;
using System.Collections.Concurrent;
using Fleck;

namespace CSharp_WebSocket_Demo
{
    class Program
    {

        static void Main(string[] args)
        {
            //服务器地址
            string ip = "127.0.0.1";
            //服务端口
            int port = 80;

            //多线程安全的字典，存储客户端
            //键：客户端ip:port
            //值：客户端对象
            ConcurrentDictionary<string, IWebSocketConnection> webSocketConnectionDictionary = new ConcurrentDictionary<string, IWebSocketConnection>();

            //服务端
            WebSocketServer webSocketServer = new WebSocketServer($"ws://{ip}:{port}");

            //出错后自动重启
            webSocketServer.RestartAfterListenError = true;

            //开启服务
            webSocketServer.Start(socket =>
            {
                string key = socket.ConnectionInfo.ClientIpAddress + ":" + socket.ConnectionInfo.ClientPort;

                //客户端连接上事件
                socket.OnOpen = () =>
                {
                    Console.WriteLine($"客户端【{key}】连接上服务器");
                    //尝试添加到字典中
                    webSocketConnectionDictionary.TryAdd(key, socket);
                    Console.WriteLine($"当前客户端连接数:{webSocketConnectionDictionary.Count}");
                };

                //服务关闭事件
                socket.OnClose = () =>
                {
                    Console.WriteLine($"客户端【{key}】断开连接");
                    //尝试从字典中移除
                    webSocketConnectionDictionary.TryRemove(key, out _);
                    Console.WriteLine($"当前客户端连接数:{webSocketConnectionDictionary.Count}");
                };

                //服务器出错事件
                socket.OnError = (Exception e) =>
                {
                    Console.WriteLine($"客户端【{key}】连接出错");
                    //尝试从字典中移除
                    webSocketConnectionDictionary.TryRemove(key, out _);
                    Console.WriteLine($"当前客户端连接数:{webSocketConnectionDictionary.Count}");
                };

                //服务器接到客户端消息事件
                socket.OnMessage = (string msg) =>
                {
                    Console.WriteLine($"客户端【{key}】发来消息:{msg}");

                    //给所有客户端返回该消息，实现聊天功能
                    foreach (IWebSocketConnection webSocketConnection in webSocketConnectionDictionary.Values)
                    {
                        try
                        {
                            webSocketConnection.Send($"【{key}】:msg");
                        }
                        catch (Exception e)
                        {
                            Console.WriteLine($"尝试给{webSocketConnection.ConnectionInfo.ClientIpAddress}:{webSocketConnection.ConnectionInfo.ClientPort}发送消息发生异常");
                            Console.WriteLine(e.StackTrace);
                        }
                    }
                };
            });

            Console.WriteLine($"服务端开启 ws://{ip}:{port}");

            //防止程序一闪而过
            Console.ReadKey();
        }
    }
}

4. Run the program

5. The client code runs with HbuilderX

<!DOCTYPE html>
<html lang="en">
	<style>
		textarea {
			vertical-align: bottom;
		}

		#output {
			overflow: auto;
		}

		#output>p {
			overflow-wrap: break-word;
		}

		#output span {
			color: blue;
		}

		#output span.error {
			color: red;
		}
	</style>
	<body>
		<h2>WebSocket Test</h2>
		<textarea cols="60" rows="6"></textarea>
		<button>send</button>
		<div id="output"></div>
	</body>
	<script>
		// http://www.websocket.org/echo.html
		const button = document.querySelector("button");
		const output = document.querySelector("#output");
		const textarea = document.querySelector("textarea");
		const wsUri = "ws://127.0.0.1";
		const websocket = new WebSocket(wsUri);
		

		button.addEventListener("click", onClickButton);

		websocket.onopen = (e) => {
			writeToScreen("CONNECTED");
			doSend("连接服务器成功");
		};

		websocket.onclose = (e) => {
			writeToScreen("DISCONNECTED");
		};

		websocket.onmessage = (e) => {
			writeToScreen(`<span>RESPONSE: ${e.data}</span>`);
		};

		websocket.onerror = (e) => {
			writeToScreen(`<span class="error">ERROR:</span> ${e.data}`);
		};

		function doSend(message) {
			writeToScreen(`SENT: ${message}`);
			websocket.send(message);
		}

		function writeToScreen(message) {
			output.insertAdjacentHTML("afterbegin", `<p>${message}</p>`);
		}

		function onClickButton() {
			const text = textarea.value;

			text && doSend(text);
			textarea.value = "";
			textarea.focus();
		}
	</script>
</html>

6. Send a message to try

Test success

source code

Code Cloud Connection [ CSharp WebSocket Demo: Use C# to build a WebSocket server, call the big brother's Fleck library, and realize a simple chat room ]

C# WebSocket realizes simple chat room

background

start

source code

Guess you like