IVY DOM


 

人生就像一副复杂拼图
每个人总有属於自己的记忆碎片
优质美国空间-老薛主机|IVY DOM|Flowline|

联系我

RSS




四月 24, 2017

开个脑洞:用浏览器做服务器

浏览器的边界远超我们的想象,我们用了55行JavaScript代码实现了一个基于浏览器的服务器。

实现的效果如下:

1、打开链接,将返回json数据

2、用js请求,也可以得到json

说明一下,我们将我们的浏览器服务器api后缀名设为:.jserve,server.jserve的主要结构如下:

<code class="language-html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"server"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span><span class="p">&gt;</span>
	
	<span class="p">(</span><span class="kd">function</span> <span class="nx">server</span><span class="p">(</span><span class="nx">params</span><span class="p">)</span> <span class="p">{</span>

		<span class="nx">params</span> <span class="o">=</span> <span class="nx">params</span> <span class="o">||</span> <span class="p">{};</span>

		<span class="nx">params</span><span class="p">.</span><span class="nx">outReq</span> <span class="o">=</span> <span class="nx">params</span><span class="p">.</span><span class="nx">outReq</span> <span class="o">||</span> <span class="kc">false</span><span class="p">;</span>

		<span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="p">{</span>
			<span class="nx">a</span><span class="o">:</span> <span class="s1">'name'</span>
		<span class="p">}</span>

		<span class="k">if</span><span class="p">(</span><span class="nx">params</span><span class="p">.</span><span class="nx">outReq</span><span class="p">)</span> <span class="p">{</span>
			<span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">ret</span><span class="p">));</span>
		<span class="p">}</span>

		<span class="k">return</span> <span class="nx">ret</span><span class="p">;</span>
	<span class="p">})({</span><span class="nx">outReq</span><span class="o">:</span> <span class="kc">true</span><span class="p">})</span>

<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code>

使用html是为了能够显示文本内容。其中server函数只在用浏览器打开网页时使用document.write将数据写回浏览器,其它情况下直接return真实的数据,用outReq标注,默认为假。

调用server.jserve的代码如下:

<code class="language-html"><span class="cp">&lt;!doctype html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>开个脑洞:用浏览器做服务器<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
	<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>

		<span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>

			<span class="kd">var</span> <span class="nx">fetchFromBrowser</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">success</span><span class="p">,</span> <span class="nx">error</span><span class="p">)</span> <span class="p">{</span>

			    <span class="nx">fetch</span><span class="p">(</span><span class="nx">url</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
			    	<span class="nx">response</span><span class="p">.</span><span class="nx">text</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>

			    		<span class="kd">var</span> <span class="nx">parseServer</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
			    			<span class="kd">var</span> <span class="nx">scripts</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">data</span><span class="p">)[</span><span class="mi">3</span><span class="p">]).</span><span class="nx">html</span><span class="p">();</span>
			    			<span class="k">return</span> <span class="nx">scripts</span><span class="p">;</span>
			    		<span class="p">},</span> 

			    		<span class="nx">evalServer</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">params</span><span class="p">)</span> <span class="p">{</span>
			    			<span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="nx">parseServer</span><span class="p">(),</span> <span class="nx">res</span><span class="p">;</span>
			    			<span class="nx">d</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">'({outReq: true})'</span><span class="p">,</span> <span class="s1">'('</span> <span class="o">+</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">params</span><span class="p">)</span> <span class="o">+</span> <span class="s1">')'</span><span class="p">);</span>
			    			<span class="nx">res</span> <span class="o">=</span> <span class="nb">eval</span><span class="p">(</span><span class="nx">d</span><span class="p">);</span>
			    			<span class="k">return</span> <span class="nx">res</span><span class="p">;</span>
			    		<span class="p">},</span>

			    		<span class="nx">result</span> <span class="o">=</span> <span class="nx">evalServer</span><span class="p">();</span>

			    		<span class="nx">success</span><span class="p">(</span><span class="nx">response</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
			    	<span class="p">}).</span><span class="k">catch</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
			    		<span class="nx">error</span><span class="p">(</span><span class="nx">success</span><span class="p">);</span>
			    	<span class="p">});</span>
			    <span class="p">});</span>

			<span class="p">}</span>

			<span class="nx">fetchFromBrowser</span><span class="p">(</span><span class="s1">'./server.jserve'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">,</span> <span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
				<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">response</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
			<span class="p">})</span>

		<span class="p">})();</span>

	<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code>

我们完成了一个函数fetchFromBrowser,此函数主要做了以下几件事:

1、使用ajax请求server.jserve文件,得到所有文本;

2、分离server.jserve中的html文本,拿到js代码;

3、重新拼凑server.jserve中的js代码,替换({outReq: true})为用户自己的参数,使server函数知道自己即将被从js调用;

4、使用eval执行拼凑之后的代码,eval将返回server函数的返回值;

5、回调给用户http信息和数据信息。

完成这5个步骤后,我们的小程序就完成了,不过这真的太简单了,没用promise、没有路由处理,没有中间件,也没有数据库查询,也谈不上任何的模式设计,还要继续完善。

那么基于浏览器的服务器有没有什么应用场景呢?

设想一下,将每个打开网页的人都作为一个计算节点,发挥大量客户端计算资源的优势,只要有大量流量,就可以源源不断的向中央服务器传输计算结果,私以为,这是一个激动人心的事情。

我们有必要重新重视起来客户端的计算力量。

代码在github上有:leinue/javascript

相关文章

返回
  1. 暂无评论。

  1. 暂无 Trackback

You must be logged in to post a comment.