背景
之前出了一期Tcp通讯教程,那个是关于PC端跟PC端通信的,这一期是PC端跟浏览器通信的,底层上来说其实基于Tcp通讯协议。
开始
1.建立控制台应用程序,框架选择4.7.2
2.进入Nuget安装Fleck库
3.修改Program.cs代码
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.运行程序
5.客户端代码用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.发送消息试一试
测试成功
源码
码云连接【CSharp WebSocket Demo: 使用C#建立WebSocket服务器,调用了大佬的Fleck库,实现了一个简单的聊天室】