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

Posted by

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

前言:         

 

*WCF初探-5:WCF消息交换模式之双工通讯(Duplex)***博文中,我讲解了双工通信服务的一个应用场景,即订阅和发布模式,这一篇,我将通过一个消息发送的例子讲解一下WCF客户端如何为双工服务创建回调对象。

双工服务指定一个回调协定,客户端应用程序必须实现该协定以便提供一个该服务能够根据协定要求调用的回调对象。虽然回调对象不是完整的服务(例如,您无法使用回调对象启动一个通道),但是为了实现和配置,这些回调对象可以被视为一种服务。

双工服务的客户端必须:

  • 实现一个回调协定类。
  • 创建回调协定实现类的一个实例,并使用该实例创建传递给 WCF
    客户端构造函数的 System.ServiceModel.InstanceContext 对象。
  • 调用操作并处理操作回调。

       双工 WCF
客户端对象除了会公开支持回调所必需的功能(包括回调服务的配置)以外,其他的功能和它们的非双工对应项相同。

 

一、创建WCF服务库Wcf.Duplex.Library:

示例说明:

 

  • Service服务契约中定义了一个发送方法Send,采用IsOneWay=true,供客户端调用,向服务端发送消息。Service中还提供了用于双工通信的回调接口IMessageExchangeCallback,该接口中定义了服务端接收消息后向客户端发送消息的方法Receive,此方法就是客户端发送消息到服务端后,服务端调用回调方法,将消息发送到客户端。
  • Client需要实现双工协定回调接口的类CallBackHandler,并实现Receive方法。
  • 针对双工协定生成的 WCF 客户端需要在构造时提供一个 InstanceContext
    类。此 InstanceContext
    类用作实现回调接口并处理从服务发送回的消息的对象所在的位置。InstanceContext
    类是用 CallbackHandler
    类的实例构造的。此对象处理通过回调接口从服务发送到客户端的消息。

  图片 1

 

1.定义协议的服务接口:

 WCF客户端为双工服务创建回调对象示例

 

  • 解决方案如下:

  图片 2

  • 工程结构说明:
  1. Service:类库程序,定义服务契约接口和回调接口,实现服务契约。在IMessageExchange中定义了Send方法,并且还定义了双工服务回调接口 IMessageExchangeCallback。

    IMessageExchange.cs的代码如下:

using System.ServiceModel;
using System.Collections.Generic;
using System.Runtime.Serialization;

namespace Service
{
    [ServiceContract(SessionMode = SessionMode.Required, CallbackContract = typeof(IMessageExchangeCallback))]
    public interface IMessageExchange
    {
        [OperationContract(IsOneWay=true)]
        void Send(string message);
    }

    public interface IMessageExchangeCallback
    {
        [OperationContract(IsOneWay = true)]
        void Receive(string message);
    }
}                                                

    MessageExchange.cs的代码如下: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ServiceModel;

namespace Service
{ 
    [ServiceBehavior(InstanceContextMode=InstanceContextMode.PerSession)]
    public class MessageExchange : IMessageExchange
    {
        public void Send(string message)
        {
            Console.WriteLine("服务端监听客户端发出的消息:" + message);
            Callback.Receive(message);

        }

        IMessageExchangeCallback Callback
        {
            get
            {
                return OperationContext.Current.GetCallbackChannel<IMessageExchangeCallback>();
            }
        }
    }
}

注意:回调契约接口IMessageExchangeCallback中的Receive方法是在客户端实现的,所以如果需要在服务端调用回调方法就必须通过当前操作的实例上下文来获取,即上面代码中的Callback对象。

  2.
 Host:控制台应用程序。提供服务寄宿程序,添加对Srevice程序集的引用。完成配置文件和代码就可以承载服务。

       Program.cs的代码如下:

  图片 3图片 4

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Service;
using System.ServiceModel;

namespace Host
{
    class Program
    {
        static void Main(string[] args)
        {
            using (ServiceHost host = new ServiceHost(typeof(MessageExchange)))
            {
                host.Opened += delegate { Console.WriteLine("服务已经启动,按任意键终止!"); };
                host.Open();
                Console.Read();
            }
        }
    }
}

View Code

    App.config的代码如下:

  图片 5图片 6

<?xml version="1.0"?>
<configuration>
    <system.serviceModel>

        <services>
            <service name="Service.MessageExchange" behaviorConfiguration="mexBehavior">
                <host>
                    <baseAddresses>
                        <add baseAddress="http://localhost:1234/MessageExchange/"/>
                    </baseAddresses>
                </host>
                <endpoint address="" binding="wsDualHttpBinding" contract="Service.IMessageExchange" />
                <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
            </service>
        </services>

        <behaviors>
            <serviceBehaviors>
                <behavior name="mexBehavior">
                    <serviceMetadata httpGetEnabled="true"/>
                    <serviceDebug includeExceptionDetailInFaults="true"/>
                </behavior>
            </serviceBehaviors>
        </behaviors>

    </system.serviceModel>
</configuration>

View Code

  3.
 Client:控制台应用程序。客户端程序,启动服务承载程序Host后,添加对服务地址的引用,将命名空间修改为

    MessageExchangeServiceRef,之后在Program.cs完成对双工服务回调接口IMessageExchangeCallback的实现和对服务方法的调用。Program.cs的代码如下:

using System;
using Client.MessageExchangeServiceRef;
using System.ServiceModel;

namespace Client1
{

    public class CallBackHandler : IMessageExchangeCallback
    {
        public void Receive(string message)
        {
            Console.WriteLine("客户端监听服务端接收的消息:" + message);
        }
    }

    class Program
    {
        static void Main(string[] args)
        {
            InstanceContext instanceContext = new InstanceContext(new CallBackHandler());
            MessageExchangeClient proxy = new MessageExchangeClient(instanceContext);
            proxy.Send("Wcf Duplex");

            Console.Read();
        }
    }
}

  运行结果如下:

  图片 7

图片 8图片 9

总结:

 

  • 本文模拟了客户端向服务端发送消息,服务端接收到消息后,将监听到的消息显示在客户端。希望通过本示例对双工通信有进步一的认识,关于实例和会话,我将在后面的博文中做解析。

图片 10

 1 [ServiceContract]
 2 public interface IWebSocketEchoCallback
 3 {
 4 [OperationContract(IsOneWay = true, Action = "*")]
 5 void Send(Message message);
 6 }
 7 
 8 [ServiceContract(CallbackContract = typeof(IWebSocketEchoCallback))]
 9 public interface IWebSocketEcho
10 {
11 [OperationContract(IsOneWay = true, Action = "*")]
12 void Receive(Message message);
13 }

View Code

注意:

OperationContract中的Action,一定要设置。

IWebSocketEcho接口中:只能定义一个OperationContract(IsOneWay = true,
Action = “*”)方法入口,否则使用WebSocket连接时会报错

IWebSocketEchoCallback
回调接口中:可以定义多个OperationContract(IsOneWay = true, Action =
“*”)方法

2.实现服务协议,并定义一个时钟,定时调用回调方法,发送信息给客户端:

图片 11图片 12

 1 public class EchoService : IWebSocketEcho
 2 {
 3 
 4 IWebSocketEchoCallback _callback = null;
 5 
 6 public EchoService()
 7 {
 8 
 9 //获取回调信道
10 _callback =
11 OperationContext.Current.GetCallbackChannel<IWebSocketEchoCallback>();
12 
13 Timer time = new Timer(10000);
14 time.Elapsed += time_Elapsed;
15 time.Start();
16 }
17 void time_Elapsed(object sender, ElapsedEventArgs e)
18 {
19 _callback.Send(CreateMessage("Message From WebSockets Host" + " " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")));
20 }
21 public void Receive(Message message)
22 {
23 if (message == null)
24 {
25 throw new ArgumentNullException("message");
26 }
27 
28 WebSocketMessageProperty property =
29 (WebSocketMessageProperty)message.Properties["WebSocketMessageProperty"];
30 WebSocketContext context = property.WebSocketContext;
31 var queryParameters = HttpUtility.ParseQueryString(context.RequestUri.Query);
32 string content = string.Empty;
33 
34 if (!message.IsEmpty)
35 {
36 byte[] body = message.GetBody<byte[]>();
37 content = Encoding.UTF8.GetString(body);
38 }
39 
40 // Do something with the content/queryParams
41 // ...
42 
43 string str = null;
44 if (string.IsNullOrEmpty(content)) // Connection open message
45 {
46 str = "Opening connection from user " +
47 queryParameters["Name"].ToString();
48 }
49 else // Message received from client
50 {
51 str = "Received message: " + content;
52 }
53 wcf.websocket.forweb.LogHelper.log.Error(str);
54 _callback.Send(CreateMessage(str));
55 }
56 
57 private Message CreateMessage(string content)
58 {
59 Message message = ByteStreamMessage.CreateMessage(
60 new ArraySegment<byte>(
61 Encoding.UTF8.GetBytes(content)));
62 message.Properties["WebSocketMessageProperty"] =
63 new WebSocketMessageProperty { MessageType = WebSocketMessageType.Text };
64 
65 return message;
66 }
67 }

View Code

二.新建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:

图片 13图片 14

<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>

View Code

 

3.在当前项目中增加页面testWebSocket.html,使用WebSocket调用服务

图片 15图片 16

<!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>

View Code

 


 同系列其他文章:如何使用HTML5的WebSocket实现网页与服务器的双工通信(一)

相关文章

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注