使用javascript(JQuery请求)将通知推送到wp8

时间:2014-04-27 18:46:18

标签: c# javascript ajax windows-phone-8 push-notification

所以我要做的是使用javascript将通知推送到Windows 8应用程序。

所以在查看了这个网站后,我找到了唯一有用的网站。

http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh202977(v=vs.105).aspx

我理解以下内容:

1-您需要开发一个请求推送通知服务URI的应用程序,然后将其与推送客户端服务共享。

(此应用的代码不需要任何内容​​,因为您只需从上面的链接复制它)

2-您需要使用推送客户端服务发送通知(原始通知)

(这里出现问题:))

代码适用于我不熟悉的.NET文件的问题。我试图将代码从.NET转换为HTML和.JS,我将把ajax请求发送到给定的URI。

然而,这给我一个有线错误,遗憾的是我无法找到使用.JS发送通知的示例

所以这里是原始代码,它基本上定义了一个将请求发送到URI的简单表单。我和我的代码之间的唯一区别是我使用JQuery Ajax请求发送

原始代码

HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SendRaw.aspx.cs" Inherits="SendRaw.SendRaw" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
   <div>

    <br />
    Enter URI:</div>
<asp:TextBox ID="TextBoxUri" runat="server" Width="666px"></asp:TextBox>
<br />
<br />
Enter Value 1:<br />
<asp:TextBox ID="TextBoxValue1" runat="server"></asp:TextBox>
<br />
<br />
Enter Value 2:<br />
<asp:TextBox ID="TextBoxValue2" runat="server"></asp:TextBox>
<br />
<br />
<br />
<asp:Button ID="ButtonSendRaw" runat="server" onclick="ButtonSendRaw_Click" 
    Text="Send Raw Notification" />
<br />
<br />
Response:<br />
<asp:TextBox ID="TextBoxResponse" runat="server" Height="78px" Width="199px"></asp:TextBox>
</form>

C#(。NET)

 using System.Net;
 using System.IO;
 using System.Text;

C#(。NET)

protected void ButtonSendRaw_Click(object sender, EventArgs e)
    {
        try
        {
            // Get the URI that the Microsoft Push Notification Service returns to the push client when creating a notification channel.
            // Normally, a web service would listen for URIs coming from the web client and maintain a list of URIs to send
            // notifications out to.
            string subscriptionUri = TextBoxUri.Text.ToString();


            HttpWebRequest sendNotificationRequest = (HttpWebRequest)WebRequest.Create(subscriptionUri);

            // Create an HTTPWebRequest that posts the raw notification to the Microsoft Push Notification Service.
            // HTTP POST is the only method allowed to send the notification.
            sendNotificationRequest.Method = "POST";

            // Create the raw message.
            string rawMessage = "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
            "<root>" +
                "<Value1>" + TextBoxValue1.Text.ToString() + "<Value1>" +
                "<Value2>" + TextBoxValue2.Text.ToString() + "<Value2>" +
            "</root>";

            // Set the notification payload to send.
            byte[] notificationMessage = Encoding.Default.GetBytes(rawMessage);

            // Set the web request content length.
            sendNotificationRequest.ContentLength = notificationMessage.Length;
            sendNotificationRequest.ContentType = "text/xml";
            sendNotificationRequest.Headers.Add("X-NotificationClass", "3");


            using (Stream requestStream = sendNotificationRequest.GetRequestStream())
            {
                requestStream.Write(notificationMessage, 0, notificationMessage.Length);
            }

            // Send the notification and get the response.
            HttpWebResponse response = (HttpWebResponse)sendNotificationRequest.GetResponse();
            string notificationStatus = response.Headers["X-NotificationStatus"];
            string notificationChannelStatus = response.Headers["X-SubscriptionStatus"];
            string deviceConnectionStatus = response.Headers["X-DeviceConnectionStatus"];

            // Display the response from the Microsoft Push Notification Service.  
            // Normally, error handling code would be here. In the real world, because data connections are not always available,
            // notifications may need to be throttled back if the device cannot be reached.
            TextBoxResponse.Text = notificationStatus + " | " + deviceConnectionStatus + " | " + notificationChannelStatus;
        }
        catch (Exception ex)
        {
            TextBoxResponse.Text = "Exception caught sending update: " + ex.ToString();
        }

我的代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <script src="jquery-2.0.3.min.js"></script>

   <script>
     $(document).ready(function(e) {
        $('#ButtonSendRaw').click(function(){
        console.log("Button Pressed");

        var subscriptionUri = $('#TextBoxUri').val();
        var textbox1 = $('#TextBoxValue1').val();
        var textbox2 = $('#TextBoxValue2').val();

        var rawMessage = "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
        "<root>" +
            "<Value1>" + textbox1 + "<Value1>" +
            "<Value2>" + textbox2 + "<Value2>" +
        "</root>";
        console.log("Sending Data");
        $.ajax({
            url: subscriptionUri,
            type: "POST",
            data: rawMessage,
            contentType:"text/xml",
            success: function(response) {
               console.log('Sucess');
               console.log("login| Response");
               console.log(response);
              },
             error: function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr.status);
                    console.log(thrownError);
            }

            });
        });
    });


</script>
    </head>
    <body>
    Enter URI:<input type="text" ID="TextBoxUri" Width="666px" /> <br />

Enter Value 1: <input type="text" ID="TextBoxValue1" /> <br />

Enter Value 2: <input ID="TextBoxValue2" /> <br />

<button id="ButtonSendRaw">Sending Data</button> <br />

Response: <input ID="TextBoxResponse" Height="78px" Width="199px" /> <br />

  </body>
  </html>

我从中得到的错误是:

    405 (Method Not Allowed)

哪里将方法自动设置为OPTIONS,尽管我正在发送POST请求

任何建议,提前谢谢:)

1 个答案:

答案 0 :(得分:1)

我假设subscriptionuri值是一个URI,其域名与包含带有JQuery代码的页面的网站不同。 (例如,您的网站托管在www.mywebsite.com上,subscriptionuri是www.microsoft.com/api/push)

此方案中发生的情况是浏览器将尝试发出跨域请求。使用跨站点请求(如跨站点请求伪造或跨站点脚本)时,请记住安全注意事项。有关详细信息,请参阅here

通常,Modern浏览器只允许在与HTML页面相同的域中对uris进行Ajax调用。如果uri位于其他域中,则浏览器不会进行直接呼叫。相反,它会尝试发出CORS请求。

跨域资源共享(CORS)规范为Web应用程序开发人员提供了一种机制,使其能够以浏览器支持的机制以安全的方式将XmlHttpRequests发送到另一个域。 CORS机制的工作原理是将HTTP标头添加到跨域HTTP请求和响应中。这些标头指示请求的来源,服务器必须通过响应中的标头指示它是否将为此来源提供资源。这种标头交换使CORS成为一种安全机制。服务器必须支持CORS并指示允许发出请求的客户端域。这种机制的优点在于它由浏览器自动处理,Web应用程序开发人员无需关心其细节。

CORS中有不同的流程,如简单请求,预检请求和Credentialed请求。您尝试进行的请求将属于预检请求的类别,因为您的请求正文具有除text / plain,application / x-www-form-urlencoded或multipart / form-data之外的Content-Type。

OPTIONS http://otherdomain.com/some-resource/ HTTP/1.1
Origin: http://mydomain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Foo

这将从服务器收到以下响应(如果在服务器上启用了CORS),表明允许POST操作

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://mydomain.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: X-Foo
Access-Control-Max-Age: 3600

收到此回复后,您的浏览器将进行实际的POST。

PUT http://otherdomain.com/some-resource/ HTTP/1.1
Content-Type: application/xml; charset=UTF-8
X-Foo: bar

此过程确保未启用CORS的服务器不会处理可能在浏览器不允许响应之前将服务器资源修改为副作用的请求,因为它缺少正确的Access-Control-Allow-Origin报头中。

在您的情况下,由于您的服务器未启用CORS,您将看到OPTIONS调用,但不会看到后续POST。解决此问题的最简单方法是在服务器上启用CORS,以便服务器在响应中发送必要的标头。希望这有帮助!