小编mat*_*ler的帖子

所有,

HTML5 Rocks有一个很好的关于服务器发送事件(SSE)的初学者教程:

http://www.html5rocks.com/en/tutorials/eventsource/basics/

但是,我不明白一个重要的概念 - 什么触发服务器上导致消息发送的事件？

换言之-在HTML5例如-服务器仅仅发送时间戳一次:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // recommended to prevent caching of event data.
function sendMsg($id, $msg) {
  echo "id: $id" . PHP_EOL;
  echo "data: $msg" . PHP_EOL;
  echo PHP_EOL;
  ob_flush();
  flush();
}
$serverTime = time();
sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));

如果我正在构建一个实际的例子 - 例如,Facebook风格的"墙"或股票代码,其中服务器会在每次某些数据更改时将"新信息""推送"到客户端,这是如何工作的？

换句话说...... PHP脚本是否有一个连续运行的循环,检查数据的变化,然后每次发现一个消息时发送一条消息？如果是这样 - 你怎么知道何时结束这个过程？

或者 - PHP脚本是否只是发送消息,然后结束(如HTML5Rocks示例中的情况)？如果是这样 - 您如何获得持续更新？浏览器是否只是定期轮询PHP页面？如果是这样 - 那是一个"服务器发送的事件"？这与使用AJAX定期调用PHP页面的JavaScript中编写setInterval函数有什么不同？

对不起 - 这可能是一个非常天真的问题.但是我找不到的例子都没有说清楚.

[UPDATE]

我认为我的问题措辞不多,所以这里有一些澄清.

假设我有一个网页,应该显示Apple股票的最新价格.

当用户首次打开页面时,该页面会创建一个EventSource,其URL为我的"stream".

var source = new EventSource('stream.php');

我的问题是 - …

所有,

我希望能够在我的CSS中使用calc()和transform:translateX.

例如,

#myDiv {
  -webkit-transform: translateX(calc(100% - 50px));
  -moz-transform: translateX(calc(100% - 50px));
  transform: translateX(calc(100% - 50px));
}

虽然这在Chrome,Safari和Firefox中完美运行 - 但它在IE10或IE11中不起作用.

你可以在这里看到一个简单的例子:http://jsfiddle.net/SL2mk/9/

这不可能吗？它是IE中的错误,还是calc()不应该在这种情况下工作？

对于它的价值 - 我在这里读到你可以"堆叠" translateX以实现相同的效果,我的测试似乎证实了这一点.也就是说,

#div {
  transform: translateX(calc(100% - 50px));
}

是相同的:

#div {
  transform: translateX(100%) translateX(-50px);
}

但我不知道这是否是最好,最可靠,面向未来的方法.

我也知道可以使用left而不是translateX,但后者在使用过渡时更加平滑,因为据我所知,它强制使用GPU来处理动画.

提前感谢您的建议和见解!

这是我简单的SQL问题......

我有两张桌子:

图书

-------------------------------------------------------
| book_id | author | genre | price | publication_date |
-------------------------------------------------------

命令

------------------------------------
| order_id | customer_id | book_id |
------------------------------------

我想创建一个返回的查询:

--------------------------------------------------------------------------
| book_id | author | genre | price | publication_date | number_of_orders |
--------------------------------------------------------------------------

换句话说,返回Books表中所有行的每一列,以及一个名为'number_of_orders'的计算列,该列计算每本书在Orders表中出现的次数.(如果订单表中没有出现图书,则该图书应列在结果集中,但"number_of_orders"应为零.

到目前为止,我已经想出了这个:

SELECT
    books.book_id,
    books.author,
    books.genre,
    books.price,
    books.publication_date,
    count(*) as number_of_orders
from books
left join orders
on (books.book_id = orders.book_id)
group by
    books.book_id,
    books.author,
    books.genre,
    books.price,
    books.publication_date

这几乎是正确的,但并不完全,因为即使书籍从未在Orders表中列出,"number_of_orders"也将为1.此外,由于我缺乏SQL知识,我确信这个查询效率很低.

编写此查询的正确方法是什么？(对于它的价值,这需要在MySQL上运行,因此我不能使用任何其他特定于供应商的功能).

提前致谢!

BULK INSERT(SQL Server)是否有可能是一个CSV文件,其中的字段只被OCCASSIONALLY用引号括起来？具体来说,引号只包含那些包含","的字段.

换句话说,我的数据看起来像这样(第一行包含标题):

id, company, rep, employees
729216,INGRAM MICRO INC.,"Stuart, Becky",523
729235,"GREAT PLAINS ENERGY, INC.","Nelson, Beena",114
721177,GEORGE WESTON BAKERIES INC,"Hogan, Meg",253

因为引号不一致,我不能使用'","作为分隔符,我不知道如何创建一个格式文件来解释这个问题.

我尝试使用','作为分隔符并将其加载到临时表中,其中每列都是varchar,然后使用一些kludgy处理来去除引号,但这也不起作用,因为包含','的字段被分成多列.

不幸的是,我无法预先操作CSV文件.

这是绝望的吗？

非常感谢任何建议.

顺便说一句,我从csv看到了这篇帖子SQL批量导入,但在这种情况下,每个字段始终用引号括起来.因此,在这种情况下,他可以使用','作为分隔符,然后删除引号.

所有,

我希望能够使用translateX它的父元素(即,从左边缘到右边缘)100%的方式为子元素设置动画.

挑战在于百分比是translateX指元素本身,而不是父母.

所以,例如,如果我的html看起来像这样:

<div id="parent">
    <div id="child">
</div>

我的CSS就像这样(省略了供应商前缀):

#parent {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: black;
}
#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
    transform: translateX(100%);
}

这不起作用 - 孩子只移动20px(自身的100%),而不是整个父移动.(你可以在jsfiddle上看到这个):

我可以做这个:

#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
    -webkit-transform: translateX(300px) translateX(-100%);
    transform: translateX(300px) translateX(-100%);
}

这工作(在jsfiddle上再次看到 ),因为它首先移动子300px(父的全宽),减去20px(子的宽度).然而,这取决于具有固定的已知像素尺寸的父母.

但是,在我的响应式设计中 - 我不知道父级的宽度,它会改变.

我知道我可以使用left:0和right:0,但是左/右的动画性能比translateX差很多(感谢Paul Irish!).

有没有办法做到这一点？

提前致谢.

所以,我正在尝试做这样的事情:

div {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none'><rect x='0' y='40' width='100' height='20' /><rect x='40' y='0' width='20' height='100' /></svg>");
}

见这里:http://jsfiddle.net/trxkcx41/4/

这在当前版本Chrome,Safari(OS X和iOS)和Firefox中都非常有效.但是,在IE 9,10或11中根本没有出现SVG.

是因为这在IE中不受支持,还是因为我做错了什么？

[更新解决方案]

感谢hungerstar,我有这个工作.总结他的建议,我需要进行以下更改:

1. 将数据类型更改data:image/svg+xml;utf8为data:image/svg+xml;charset=utf8(即,charset=是必需的)

2. URL编码svg.要最小化URL编码,请使用'而不是"包含属性.所以,在我的情况下,只有<和>需要进行编码.

最终,我的CSS看起来像这样:

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none' %3E%3Crect x='0' y='40' width='100' height='20' /%3E%3Crect x='40' y='0' width='20' height='100' /%3E%3C/svg%3E");

所有,

我正在开发专门针对iPad的网络应用程序,我正在使用CSS3过渡来为div设置动画(从左到右移动).

我的班级看起来像这样:

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

当用户单击按钮时,我这样做:

var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);

除了第一次用户触发转换之外,这种方法效果很好; 第一次,有一个非常明显的闪烁.

我意识到我不需要使用translate3d,因为我只是左右移动div,但据我所知,这迫使iPad使用GPU加速.(它是否正确？)

提前谢谢了!

[UPDATE]

关于"闪烁",我有点模棱两可.简而言之 - 我一直在尝试各种各样的CSS3过渡(特别是在iPad上),并且始终如一 - 我注意到在过渡的开始或结束时有明显的闪烁.

换句话说,转换本身非常顺利.但是,根据精确设置,在转换开始或结束之前会有明显的闪烁.

这是另一个例子:我有三张照片(PNG)堆叠在一起.

底部PNG的不透明度= 1.0,顶部2的不透明度= 0.0.使用-webkit-keyframes,当照片淡入和淡出时,我能够获得丝般平滑的过渡.当动画结束时,底部照片以opacity = 1.0结束,前两个以opacity = 0.0结束.(这应该是他们的最终状态).

然而,正如动画结束一样,底部照片闪烁.就像浏览器强制重绘/重绘屏幕一样,这需要几分之一秒.

破坏效果已经足够糟糕,然后渲染转换不可用.(在我的iMac上它几乎,但不是很难以察觉.在iPad上,这是不容错过的).

所有,

我的情况看起来大致如下:

我的HTML页面包含div(我称之为"parentDiv"),我正在进行转换.当转换结束时,它应该调用"onTransitionEndParent"

parentDiv包含一个div(我称之为"childDiv"),我正在执行不同的转换.当转换结束时,它应该调用"onTransitionEndChild".

所以,我的代码大致如下:

parentDiv.addEventListener("webkitTransitionEnd", onTransitionEndParent, false);
childDiv.addEventListener("webkitTransitionEnd", onTransitionEndChild, false);

我发现的问题......

当parentDiv的转换结束(正确)时,将调用onTransitionEndParent.然而,它的另调用时childDiv过渡端(不出我所料...)

换一种说法...

• 当childDiv的转换结束时,将调用onTransitionEndChild
• 当parentDiv的转换结束时,调用onTransitionEndParent ,当childDiv的转换结束时,调用AGAIN

这是正确的行为,还是我做错了什么？

有没有办法确保onDnsitionEndParent仅在parentDiv的转换结束时被调用,而不是当它的任何子div的转换结束时？

提前谢谢了.

我正在开发一个应用程序,用于向用户发送和接收SMS消息.(别担心 - 这不是垃圾邮件 - 应用程序的每个用户都希望发送和接收这些邮件).

应用程序的一个关键方面......如果用户向应用程序发送消息,则应用程序会将该消息发送给该用户"团队"中的每个人.因此,该应用程序将发送一个相当数量的消息接收(我希望几千用户,每天5,000-10,000条短信).

我一直在尝试一些选择:

1. 短信到电子邮件
2. 将手机连接到我的服务器
3. 承包SMS网关

选项1很棒,因为它是免费的,但它是不可靠的(显然移动提供商在他们可以收取的短信之后排队这些消息,所以他们经常收到迟到或丢失)

选项2也很便宜,但手机无法跟上我要发送的消息数量.此外,移动电话提供商将认为此数量的消息过多.

选项3是完美的,除了SMS网关提供商收取PER MESSAGE(通常每个0.02美元至0.06美元),这会产生不可能的扩展问题.(让我想起旧的商业格言......"当然,我们在每次交易中都会亏钱,但我们会在数量上弥补......")

所以,长话短说 - 在EARTH上如何将Twitter拉下来？他们从一开始就做了类似的事情(允许用户与应用交换短信).即使他们通过谈判获得了令人难以置信的折扣(例如,每条消息0.001美元),他们也会支付极高的成本来发送他们处理的数亿条消息.

有谁知道他们是怎么做到的？

我正在尝试构建一个简单的Web应用程序,允许人们从他们的手机发送短信到我的应用程序.

我之前看过这个问题:

通过Web应用程序接收SMS消息在.NET应用程序中
接收SMS消息

......但我有一些独特的(我认为)情况.

1. 我期待的消息数量非常少(<1,000 /月)
2. 我的用户都在美国
3. 我不需要发送短信 - 我只是想让用户能够向应用程序发送消息

我知道像Clickatell这样的主要短信"提供商".然而,他们的服务似乎是巨大的矫枉过正.

理想情况下,我希望用户能够向我设置的EMAIL帐户发送短信.然而,基于(表面)调查,看起来这是不可能的.(例如,我在我的iPhone上尝试过,并且没有收到消息).

所以,我想下一个最好的选择是我的用户将SMS消息发送到专用电话号码,并将这些消息转发到我服务器上的电子邮件帐户.我想这会奏效.但我不知道如何进行转发部分,或者甚至可能.

Clickatell offers a service like that, but they charge a few hundred bucks to set up a number, a few hundred bucks to RENT the number each month, and a few pennies for each message. And, they only offer non-US phone numbers. (In the US, you apparently need to have a "short-code", that's INCREDIBLY expensive). Seems like there should be a MUCH simpler approach. …