如何使用HTML5的WebSocket实现网页与服务器的双工通信(二)
本系列服务端双工通信包括两种实现方式：一、使用Socket构建；二、使用WCF构建。本文为使用WCF构建服务端的双工通信，客户端同样使用Html5的WebSocket技术进行调用。
一、创建WCF服务库Wcf.Duplex.Library：
1.定义协议的服务接口：
[ServiceContract]
public interface IWebSocketEchoCallback
{
[OperationContract(IsOneWay = true, Action = "*")]
void Send(Message message);
} [ServiceContract(CallbackContract = typeof(IWebSocketEchoCallback))]
public interface IWebSocketEcho
{
[OperationContract(IsOneWay = true, Action = "*")]
void Receive(Message message);
}
注意：
OperationContract中的Action，一定要设置。
IWebSocketEcho接口中：只能定义一个OperationContract(IsOneWay = true, Action = "*")方法入口，否则使用WebSocket连接时会报错
IWebSocketEchoCallback 回调接口中：可以定义多个OperationContract(IsOneWay = true, Action = "*")方法
2.实现服务协议，并定义一个时钟，定时调用回调方法，发送信息给客户端：
public class EchoService : IWebSocketEcho
{ IWebSocketEchoCallback _callback = null; public EchoService()
{ //获取回调信道
_callback =
OperationContext.Current.GetCallbackChannel<IWebSocketEchoCallback>(); Timer time = new Timer();
time.Elapsed += time_Elapsed;
time.Start();
}
void time_Elapsed(object sender, ElapsedEventArgs e)
{
_callback.Send(CreateMessage("Message From WebSockets Host" + " " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")));
}
public void Receive(Message message)
{
if (message == null)
{
throw new ArgumentNullException("message");
} WebSocketMessageProperty property =
(WebSocketMessageProperty)message.Properties["WebSocketMessageProperty"];
WebSocketContext context = property.WebSocketContext;
var queryParameters = HttpUtility.ParseQueryString(context.RequestUri.Query);
string content = string.Empty; if (!message.IsEmpty)
{
byte[] body = message.GetBody<byte[]>();
content = Encoding.UTF8.GetString(body);
} // Do something with the content/queryParams
// ... string str = null;
if (string.IsNullOrEmpty(content)) // Connection open message
{
str = "Opening connection from user " +
queryParameters["Name"].ToString();
}
else // Message received from client
{
str = "Received message: " + content;
}
wcf.websocket.forweb.LogHelper.log.Error(str);
_callback.Send(CreateMessage(str));
} private Message CreateMessage(string content)
{
Message message = ByteStreamMessage.CreateMessage(
new ArraySegment<byte>(
Encoding.UTF8.GetBytes(content)));
message.Properties["WebSocketMessageProperty"] =
new WebSocketMessageProperty { MessageType = WebSocketMessageType.Text }; return message;
}
}
二.新建WEB项目，在项目中引用第一步建立的WCF服务库Wcf.Duplex.Library。
1.打开Global.asax.cs的文件，在Application_Start增加以下代码：
RouteTable.Routes.Add(new ServiceRoute("EchoService",new ServiceHostFactory(),typeof(EchoService)));
说明：增加服务路由的时候，路由前缀可以随便设置；ServiceType，需要设置为WCF服务库的EchoService类。
2.配置WEB.Config:
<system.serviceModel>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" /> <services> <service name="Wcf.Duplex.Library.EchoService"><!--此处为服务类，需要修改为本项目的服务类-->
<endpoint address="" binding="customBinding" bindingConfiguration="webSocket" contract="Wcf.Duplex.Library.IWebSocketEcho" /><!--此处为服务的协议接口，需要修改为本项目对应的服务接口-->
</service>
</services>
<bindings>
<customBinding>
<binding name="webSocket">
<byteStreamMessageEncoding/>
<httpTransport>
<webSocketSettings transportUsage="Always" createNotificationOnConnection="true"/>
</httpTransport>
</binding>
</customBinding>
</bindings>
</system.serviceModel>
3.在当前项目中增加页面testWebSocket.html，使用WebSocket调用服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebSockets客户端示例</title>
</head>
<script>
var webSocket;
function connect() {
try {
var readyState = new Array("正在连接", "已建立连接", "正在关闭连接", "已关闭连接");
var host = 'ws://localhost:61413' +
window.location.pathname.replace('testWebSocket.html', 'EchoService') +
'?Name=liza';
webSocket = new WebSocket(host);
var message = document.getElementById("message");
message.innerHTML += "<p>Socket状态：" + readyState[webSocket.readyState] + "</p>";
webSocket.onopen = function () {
message.innerHTML += "<p>Socket状态：" + readyState[webSocket.readyState] + "</p>";
}
webSocket.onmessage = function (msg) {
message.innerHTML += "<p>接收信息：" + msg.data + "</p>";
}
webSocket.onclose = function () {
message.innerHTML += "<p>Socket状态：" + readyState[webSocket.readyState] + "</p>";
}
}
catch (exception) {
message.innerHTML += "<p>有错误发生</p>";
}
}
function send() {
var text = document.getElementById("text").value;
var message = document.getElementById("message");
if (text == "") {
message.innerHTML += "<p>请输入一些文字</p>";
return;
}
try {
webSocket.send(text);
message.innerHTML += "<p>发送数据：" + text + "</p>";
}
catch (exception) {
message.innerHTML += "<p>发送数据出错</p>";
}
document.getElementById("text").value = "";
}
function disconnect() {
webSocket.close();
}
</script>
<body>
<h1>WebSocket客户端示例</h1>
<div id="message"></div>
<p>请输入一些文字</p>
<input id="text" type="text">
<button id="connect" onclick="connect();">建立连接</button>
<button id="send" onclick="send();">发送数据</button>
<button id="disconnect" onclick="disconnect();">断开连接</button>
</body>
</html>
同系列其他文章：如何使用HTML5的WebSocket实现网页与服务器的双工通信(一)
如何使用HTML5的WebSocket实现网页与服务器的双工通信(二)的更多相关文章
- 如何使用HTML5的WebSocket实现网页与服务器的双工通信(一)
本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用Socket构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.网页客户 ...
- Java和WebSocket开发网页聊天室
小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...
- html5利用websocket完成的推送功能（tomcat）
html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...
- Springboot整合WebSocket实现网页版聊天，快来围观！
- 15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
- 【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...
- 认识HTML5的WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
- HTML5之WebSocket
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...
- 基于html5实现的愤怒的小鸟网页游戏
之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...
随机推荐
- C#防盗链处理类的代码
如下的内容是关于C#防盗链处理类的内容. public class FileHandler:IHttpHandler{public FileHandler(){} public void Proces ...
- android -------- 沉浸式状态栏和沉浸式导航栏（ImmersionBar）
android 4.4以上沉浸式状态栏和沉浸式导航栏管理,包括状态栏字体颜色,适用于Activity.Fragment.DialogFragment.Dialog,并且适配刘海屏,适配软键盘弹出等问题 ...
- Python实现：汉诺塔问题
汉诺塔问题不管在任何编程语言里都是经典问题,是采用递归算法的经典案例,该问题可以抽象如下: 一 .3根圆柱A,B,C,其中A上面串了n个圆盘 二 .这些圆盘从上到下是按从小到大顺序排列的,大的圆盘任何 ...
- 【XAF问题】多个属性验证RuleUniqueValue
一.问题 1. 在XAF中如何验证多个属性唯一值? 二.解决方法 使用RuleCombinationOfPropertiesIsUnique [RuleCombinationOfPropertiesI ...
- 为二级域名注册ssl证书，并强制使用https对http进行跳转
服务器上仍然使用nginx进行代理 1.为二级域名申请ssl证书,如blog.yourdomain.com,见前文. 2.在域名解析服务中,为二级域名添加解析记录 3.nginx默认读取/etc/ng ...
- uiautomatorviewer工具的安装与使用
Android自动化测试应用<一><uiautomatorviewer工具的安装与使用> OldKe 关注 2018.01.25 18:00* 字数 488 阅读 2083评论 ...
- php 查询mysql数据批量转为PDF文件二（批量使用wkhtmltopdf html导出PDF）
上节讲到配置wkhtmltopdf,这节讲下如何批量操作 首先讲下wkhtmltopdf如何使用 直接命令行输入: wkhtmltopdf http://www.baidu.com/ baidu.p ...
- maven作用
1.控制项目间依赖关系方案 A项目依赖B项目的某些功能.将B项目打包为jar,并在A项目的Library下导入B的jar文件. 这样做有着很明显的缺点: 1.如果在开发过程中,发现B中的 ...
- springboot webmvc初始化：一个登陆异常引出的话题
1.场景复现: 一个登陆异常引出的问题. 我们通过精心组织组件扫描的方式,来装配不同的子模块,形成一个可运行的应用: 在载入某个子模块后,我们发现应用虽然正常启动,但尝试登陆的时候,出现一个很异常的异 ...
- nginx之location的匹配规则
nginx之location的匹配规则 一.语法规则 location [=|~|~*|^~] /uri/ { - } 符号 含义 = 开头表示精确匹配 ^~ 开头表示 uri 以某个常规字符串开头 ...