本系列服务端双工通信包括两种实现方式：一、使用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实现网页与服务器的双工通信(二)的更多相关文章

  1. 如何使用HTML5的WebSocket实现网页与服务器的双工通信(一)

    本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用Socket构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.网页客户 ...

  2. Java和WebSocket开发网页聊天室

    小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...

  3. html5利用websocket完成的推送功能（tomcat）

    html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...

  4. Springboot整合WebSocket实现网页版聊天，快来围观！

  5. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

  6. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

  7. 认识HTML5的WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  8. HTML5之WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  9. 基于html5实现的愤怒的小鸟网页游戏

    之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...

随机推荐

  1. web服务器初识

    静态元素:.html .img js css swf mp4   --->浏览器自身可以解析 动态元素:.php .jsp .cgi .asp php SQL  ---->浏览器不能直接解 ...

  2. 另类AOP设计

    常见的AOP设计都基于Remoting的RealProxy,或者基于Emit实现的动态代理,或者基于反射的Attribute扫描拦截.但是我们还有另类的拦截方案DynamicObject,只要我们继承 ...

  3. vue部署的路径问题

    本人在开始学习vue的过程中,虽然比较容易上手,还是碰到了很多坑,比如我今天要说的VUE的部署问题.我在部署vue的过程中发现自己在开发环境中,页面什么都可以跑起来,但是npm dev build后发 ...

  4. CF #552（div3）F 背包问题

    题目链接:http://codeforces.com/contest/1154/problem/F 题意:一个商店有n个物品,每个物品只能买一次,同时有m种优惠,即一次买够x件后,这x件中最便宜的k件 ...

  5. 『超分辨率重建』从SRCNN到WDSR

    超分辨率重建技术(Super-Resolution)是指从观测到的低分辨率图像重建出相应的高分辨率图像.SR可分为两类:    1. 从多张低分辨率图像重建出高分辨率图像    2. 从单张低分辨率图 ...

  6. IIS部署发布flask网站

    先参考http://python.jobbole.com/87655/,会发现失败. 再参考https://blog.csdn.net/david_lee13/article/details/8198 ...

  7. 将对象转成 json 以及 将字符串 hash（SHA1） 加密

    如下: /// <summary> /// 生成 Json /// </summary> /// <param name="obj"></ ...

  8. k-近邻法(kNN)

    原理: 已知一个训练样本集(有标签),计算待测试样本与所有训练样本的距离. 按距离从小到大进行排序并取前 k 个,统计 k 个中出现次数最多的分类为分类结果. 优点:精度高,对异常值不敏感,无数据输入 ...

  9. Lapack求解线性方程组

    可参见这两个页面: 1. http://www.culatools.com/dense/lapack/ 2. http://www.netlib.org/lapack/lug/node1.html 根 ...

  10. CentOS7系统上的GPSTK源码安装

    网址:http://www.gpstk.org/bin/view/Documentation/BuildingGPSTkUnderUnix 这里使用Cmake来安装源码,网站上的原文摘抄如下,有少部分 ...