赞
踩
WebSocket出现之前,Web端为了实现即时通讯,所用的技术都是Ajax轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽。而比较新的技术去做轮询的效果是Comet , 但这种技术虽然可达到全双工通信,依然需要发出请求。
Web Sockets没有什么神奇之处,首先要意识到该协议本质上是一个基本的双工TCP/IP套接字连接。连接从客户端连接到远程服务器并将HTTP标头文本发送到该服务器开始。标头文本要求Web服务器将连接升级为Web套接字连接。这是作为握手完成的,Web服务器使用适当的HTTP文本标头进行响应,从那时起,客户端和服务器将使用Web Socket语言。
在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送,改变了原有的B/S模式。WebSocket的技术原理:
WebSocket的技术原理:
Websocket有java、nodejs、python、PHP、等版本 ,哪些浏览器支持websocket:
我现在使用的是C#版本,服务器端是Fleck。客户端和服务器端来使用websocket的,下面开始讲解如何使用:
接下来我们使用的是C#控制台程序来实现
1、打开vs2019,创建空项目
2、
3、添加控制台项目
4、引入fleck
Fleck是C#中的一个WebSocket服务器实现。Program.cs代码如下:
- using Fleck;
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Text;
- using System.Threading.Tasks;
-
- namespace WebSocketConsole
- {
- class Program
- {
- static void Main(string[] args)
- {
- FleckLog.Level = LogLevel.Debug;
- var allSockets = new List<IWebSocketConnection>();
- var server = new WebSocketServer("ws://0.0.0.0:7080");
- server.Start(socket =>
- {
- socket.OnOpen = () =>
- {
- Console.WriteLine("客户端连接成功!");
- allSockets.Add(socket);
- Console.WriteLine("当前客户端数量:"+allSockets.ToList().Count);
- };
- socket.OnClose = () =>
- {
- Console.WriteLine("客户端已经关闭!");
- allSockets.Remove(socket);
- Console.WriteLine("当前客户端数量:" + allSockets.ToList().Count);
- };
- //收到消息时
- socket.OnMessage = message =>
- {
- Console.WriteLine(message);
- allSockets.ToList().ForEach(s => s.Send(message));
- };
- });
-
- //读取输入消息
- var input = Console.ReadLine();
- //当消息不为“exit"时,则进入死循环
- while (input != "exit")
- {
- //遍历所有的socket客户端,给每个客户端发送消息
- foreach (var socket in allSockets.ToList())
- {
- socket.Send(input);
- }
- input = Console.ReadLine();
- }
-
- }
- }
- }
编译没有问题,成功,
5、解决方案上添加新项目
选择
项目名称取名为:SocketWebClient,然后添加html网页,名称WebChatPage.html,内容如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- </head>
- <body>
- <div>发送消息:</div>
- <input type="text" id="msgContent" />
- <input type="button" value="点我发送" onclick="CHAT.chat()" />
- <div>接受消息:</div>
- <div id="receiveMsg" style="background-color: gainsboro;"></div>
- <script type="application/javascript">
-
- window.CHAT = {
- socket: null,
- init: function() {
- if (window.WebSocket) {
- CHAT.socket = new WebSocket("ws://127.0.0.1:7080/ws");//websocket服务器地址及端口
- CHAT.socket.onopen = function() {
- console.log("连接建立成功...");
- },
- CHAT.socket.onclose = function() {
- console.log("连接关闭...");
- },
- CHAT.socket.onerror = function() {
- console.log("发生错误...");
- },
- CHAT.socket.onmessage = function(e) {
- console.log("接受到消息:" + e.data);
- var receiveMsg = document.getElementById("receiveMsg");
- var html = receiveMsg.innerHTML;
- receiveMsg.innerHTML = html + "<br/>" + e.data;
- }
- } else {
- alert("浏览器不支持websocket协议...");
- }
- },
- chat: function() {
- var msg = document.getElementById("msgContent");
- CHAT.socket.send(msg.value);
- }
- };
-
- CHAT.init();
-
- </script>
- </body>
-
-
- </html>
6、在WebSocketConsole上找到生成的文件路径,即项目的debug目录
7、将SocketWebClient设为启动项目,运行html页面
8、
网页输入消息
9、再用另一个浏览器edge打开网页,输入消息
websocket管用,好使,拈,扛把子。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。