之前也有分享其他方式:
现在来说另外一个,使用第三方组件来完成的,底层都一样的。
1、创建一个Web网站来当成客户端,再创建一个控制台程序当成服务端提供服务,我们先写服务端。
2、控制台程序需要引用Newtonsoft.Json、WebSocketSharpFork两个包。

3、编写一个通讯处理类:Chat.cs
这里面负责处理所有的消息和连接,最重要的就是其中的OnMessage方法,如果需要和数据库对接,可以在OnMessage调用WCF或者自己的服务,不推荐在服务端直接操作数据库。
using Newtonsoft.Json;
using System;
using WebSocketSharp;
using WebSocketSharp.Server;
namespace WebSocketSharpDemo
{
/// <summary>
///操作类
/// </summary>
class Chat : WebSocketBehavior
{
/// <summary>
///链接
/// </summary>
protected override void OnOpen()
{
Console.WriteLine($"客户端[{this.ID}]连上了");
base.OnOpen();
}
/// <summary>
///消息处理
/// </summary>
protected override void OnMessage(MessageEventArgs e)
{
string data = e.Data;
/*JToken param = JToken.Parse(data);
得到用户数据 进行逻辑处理
*/
SendAsync(JsonConvert.SerializeObject(new { code = 200, msg = "收到你的数据:" + data }), null);
}
/// <summary>
///关闭
/// </summary>
protected override void OnClose(CloseEventArgs e)
{
Console.WriteLine($"客户端[{this.ID}]关闭了");
base.OnClose(e);
}
/// <summary>
///错误
/// </summary>
protected override void OnError(ErrorEventArgs e)
{
Console.WriteLine($"客户端[{this.ID}]出错:{e.Message}");
base.OnError(e);
}
}
}4、修改Program.cs的main方法
using System;
using WebSocketSharp.Server;
namespace WebSocketSharpDemo
{
class Program
{
static void Main(string[] args)
{
WebSocketServer wssv = new WebSocketServer(6688);
wssv.AddWebSocketService<Chat>("/Chat");
wssv.Start();
Console.WriteLine("服务器启动,按任意键终止服务器。");
Console.ReadKey(true);
wssv.Stop();
}
}
}到这里,最基本的服务端就写完了。

5、客户端就相对简单,这里写个示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>WebSocket测试页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
</style>
</head>
<body>
<div>
用户名:<input type="text" id="username" value="carson" /> 密码:<input type="text" id="userpass" value="pass123" />
<button type="button" id="btnSub">submit</button>
</div>
<ul id="outCnt"></ul>
<script>
var echo = function(text) {
var echoone = function(text) {
var dom = document.createElement("li");
var t = document.createTextNode(text);
dom.appendChild(t);
var cnt = document.getElementById("outCnt");
cnt.appendChild(dom);
};
if (Array.isArray(text)) {
text.map(function(t) {
echoone(t);
});
} else {
echoone(text);
}
};
let wsc;
var wsurl = "ws://localhost:6688/Chat";
(function() {
if ("WebSocket" in window) {
//初始化连接
echo("正在连接");
wsc = new WebSocket(wsurl);
wsc.onopen = function() {
echo("连接成功");
};
wsc.onclose = function() {
echo("服务关闭");
};
wsc.onmessage = function(e) {
echo(e.data);
console.log(e.data);
};
//提交通讯
document.getElementById("btnSub").addEventListener('click', function() {
var username = document.getElementById("username").value;
var userpass = document.getElementById("userpass").value;
if (wsc.readyState == 1) {
wsc.send(JSON.stringify({
UserName: username,
UserPass: userpass
}));
} else {
echo("服务不可用,可能是凉了");
}
});
}
})();
</script>
</body>
</html>6、写完了,我们F12看看效果,你会发现,一旦连接上,再次通讯就不会产生新的请求,都是在之前的连接上完成的。

川公网安备 51010702003150号
留下您的脚步
最近评论