yzprofile's Notebook

All Posts| Note| Books| About
18 Sep 2011

chrome native code on github pages

chrome 14稳定版本发布,支持了本地c/c++代码在浏览器上的执行。 在家无聊就来把它放置在github pages支撑上的博客上面做个测试,也挺有意思的。:)

这里是native client sdk的一些介绍 http://code.google.com/chrome/nativeclient/docs/technical_overview.html

如果打开浏览器看到下面的页面并且弹出了对话框那就说明native client已经加载到浏览器啦。但是github速度有点慢,加载时间可能会有点长..-_-!!

在此之前请确保自己使用的是chrome 14或者更高,可以在url中输入about:flags,检测浏览器Native Client支持是否启动。

这里是使用github pages发布的页面,如果对这个静态页面发布服务不太熟悉,可以点击这里http://pages.github.com/去了解详细的内容。

对于native client应用只需要一个支持静态文件发布的web服务就能满足啦,毕竟所有的东西都是已经编译生成好的嘛。


可以在这里下载到native client sdk http://code.google.com/chrome/nativeclient/docs/download.html

这里也有更加详细的官方说明:http://code.google.com/chrome/nativeclient/docs/tutorial.html#downloadSDK

解压之后进入exmple目录执行:

python httpd.py 5103

可以将它sdk自己带的例子通过httpd发布,访问localhost:5103就可以看到了。

如果想新建一个自己工程,进入project_template文件夹执行:

python init_project.py -d ../examples -n hello_tutorial

就会生成一个空着的应用模板。

进入examples下生成的hello_tutorial文件夹,编辑hello_tutorial.html文件,在模块加载的回调函数中添加:

function moduleDidLoad() {
    HelloTutorialModule = document.getElementById('hello_tutorial');
    HelloTutorialModule.addEventListener('message', handleMessage, false);
    updateStatus('SUCCESS');
    HelloTutorialModule.postMessage('hello,world!');//添加这一句
}

之后编辑hello_tutorial.cc文件,实现其HandleMessage虚方法

virtual void HandleMessage(const pp::Var& var_message) {
     // TODO(sdk_user): 1. Make this function handle the incoming message.
     PostMessage(var_message.AsString());
}

进入bash执行对工程进行编译

./scons

再通过web服务将此文件夹发布出去,访问hello_tutorial.html就能看到本页面弹出对话框的效果了。

github提供了静态文件发布生成页面的服务,可以通过这个来做一个自己的blog或者前端页面的展示是非常方便并且划算的。

只需要在github自己的代码仓库中以自己的用户名建立一个项目,如yzprofile.github.com,并提交index.html代码,github将会在10分钟之后生成你的主页出来。

并且支持markdown语法模板解释生成页面。详细信息还是看上面的链接咯。

对于将native code发布到github pages下,也只需要把自己完成的工程copy到自己在github pages的项目目录下,提交到代码仓库就ok了。可以通过url直接访问。

大家都是静态的嘛…

hava fun.:)

EOF