之前也有分享其他方式:
现在来说另外一个,使用第三方组件来完成的,底层都一样的。
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看看效果,你会发现,一旦连接上,再次通讯就不会产生新的请求,都是在之前的连接上完成的。
留下您的脚步
最近评论