大家好,欢迎来到IT知识分享网。
WebSocket是html5的一种协议,那么就表示要使用websocket客户端的浏览器就要支持html5。
对于不支持的使用flash去解决。
服务端采用的是Fleck,Fleck的好处就是简单方便,作者已经进行了完整的封装,可以根据自己情况进行修改
使用flash实现兼容低版本IE
websocket 连接集合
using Fleck;
using System.Collections.Generic;
namespace Common
{
public class FlectWebSock
{
public static List<IWebSocketConnection> sockets = new List<IWebSocketConnection>();
}
}
IT知识分享网
在启动时创建 WebSocketServer服务
IT知识分享网 protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
FleckWebSocket();
}
public void FleckWebSocket()
{
/*与网站的端口号不一致,与websocket地址的端口号保持一致*/
var socketServer = new WebSocketServer("ws://0.0.0.0:58349");
/*发生错误自动重启*/
socketServer.RestartAfterListenError = true;
socketServer.Start(socket =>
{
socket.OnOpen = () =>
{
FlectWebSock.sockets.Add(socket);
};
socket.OnClose = () =>
{
FlectWebSock.sockets.Remove(socket);
};
socket.OnMessage =Message => {
FlectWebSock.sockets.ForEach(x => x.Send(Message));
};
});
}
简单的页面
怎么称呼您?<input type="text" value="张三" id="userName" /><br />
您要说什么?<input type="text" id="Message" /><input type="button" value="发送" onclick="Send()" /><br />
<input type="button" value="连接" onclick="Connect()" />
<input type="button" value="关闭" onclick="Close()" />
<div id="content"></div>
简单的样式
IT知识分享网 #content{
height:400px;
overflow-y:auto;
width:500px;
}
前端js
<!--兼容低版本IE方案的JS-->
<script src="~/Script/webSocket_js/swfobject.js"></script>
<!--兼容低版本IE方案的JS-->
<script src="~/Script/webSocket_js/web_socket.js"></script>
<script type="text/javascript">
var _WebSocket;
/*兼容低版本IE方案的SWF地址*/
WEB_SOCKET_SWF_LOCATION = "/Script/webSocket_js/WebSocketMain.swf";
/*兼容低版本IE方案,调试信息*/
WEB_SOCKET_DEBUG = true;
function Connect() {
if (_WebSocket != null) {
switch (_WebSocket.readyState) {
case _WebSocket.CLOSED: Open(); break;
default: alert("无法操作!"); break;
}
} else {
Open();
}
}
function Open() {
/*websocket地址端口号*/
_WebSocket = new WebSocket("ws://localhost:58349");
_WebSocket.onopen = function () {
alert("连接成功!");
}
_WebSocket.onmessage = function (socket) {
var p = document.createElement("p");
p.innerHTML = socket.data;
document.getElementById("content").appendChild(p);
}
_WebSocket.onclose = function () {
alert("关闭成功!");
}
}
function Send() {
/*发送消息*/
_WebSocket.send(DateNow() + " " + document.getElementById("userName").value + ":" + document.getElementById("Message").value);
}
function Close() {
_WebSocket.close();
}
function DateNow(){
var time=new Date();
return parseInt(time.getFullYear())+"-"+time.getMonth()+"-"+time.getDate();
}
</script>
效果图
如果有错误,欢迎指出!相互学习共同进步
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/10121.html