1<!DOCTYPE html>
2<html>
3<!--
4Copyright (c) 2012 The Chromium Authors. All rights reserved.
5Use of this source code is governed by a BSD-style license that can be
6found in the LICENSE file.
7-->
8<head>
9  <meta http-equiv="Pragma" content="no-cache">
10  <meta http-equiv="Expires" content="-1">
11  <title>{{title}}</title>
12  <script type="text/javascript" src="common.js"></script>
13  <script type="text/javascript" src="example.js"></script>
14</head>
15<body data-custom-load="true" {{attrs}}>
16  <h1>{{title}}</h1>
17  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
18  <p>
19    This example shows how you can use standard C library file and socket
20    operation functions in Native Client using a library called nacl_io.
21  </p>
22  <p>
23    nacl_io provides a virtual filesystem. The filesystem can be "mounted"
24    in a given directory tree. When you perform operations on files in those
25    directories, the mount determines how those operations should be performed.
26  </p>
27  <p>
28    This example has four mounts by default.
29    <ol>
30      <li><i>/</i> the root of the filesystem. This is a memory mount, and
31          is non-persistent.</li>
32      <li><i>/persistent</i> a persistent storage area. Any data written
33          here can be read back after Chrome is restarted.</li>
34      <li><i>/http</i> a mount that can read from a URL. Try reading from
35          /http/index.html.</li>
36      <li><i>/dev</i> a mount containing some utility files. /dev/null,
37          /dev/zero, etc.</li>
38    </ol>
39  </p>
40  <p>
41    nacl_io also provides a (currently incomplete) posix socket api. Like the
42    virtual filesystem, it is an abstraction layer on top of ppapi. To use this
43    API, an app must be a packaged app with the appropriate socket permissions
44    specified in the manifest file.
45  <hr>
46  <p><b>File Operations:</b></p>
47  <div>
48    <span>
49      <input type="radio" id="radiofopen" name="group" checked="checked">fopen
50      <input type="radio" id="radiofclose" name="group">fclose
51      <input type="radio" id="radiofread" name="group">fread
52      <input type="radio" id="radiofwrite" name="group">fwrite
53      <input type="radio" id="radiofseek" name="group">fseek
54      <input type="radio" id="radiofflush" name="group">fflush
55      <input type="radio" id="radiostat" name="group">stat
56    </span>
57  </div>
58  <div class="function" id="fopen">
59    <span>
60      Filename:
61      <input type="text" id="fopenFilename">
62      <select id="fopenMode">
63        <option value="r">Read Existing (r)</option>
64        <option value="r+">Read/Write Existing (r+)</option>
65        <option value="w">Write New File (w)</option>
66        <option value="w+">Read/Write New File (w+)</option>
67        <option value="a">Append Write (a)</option>
68        <option value="w+">Append Read/Write (a+)</option>
69      </select>
70      <button>fopen</button>
71    </span>
72  </div>
73  <div class="function" id="fclose" hidden>
74    <span>
75      <select class="file-handle" id="fcloseHandle"></select>
76      <button>fclose</button>
77    </span>
78  </div>
79  <div class="function" id="fread" hidden>
80    <span>
81      <select class="file-handle" id="freadHandle"></select>
82      Count:
83      <input type="text" id="freadBytes">
84      <button>fread</button>
85    </span>
86  </div>
87  <div class="function" id="fwrite" hidden>
88    <span>
89      <select class="file-handle" id="fwriteHandle"></select>
90      Data:
91      <input type="text" id="fwriteData">
92      <button>fwrite</button>
93    </span>
94  </div>
95  <div class="function" id="fseek" hidden>
96    <span>
97      <select class="file-handle" id="fseekHandle"></select>
98      Offset:
99      <input type="text" id="fseekOffset">
100      Whence:
101      <select id="fseekWhence">
102        <option value="0">SEEK_SET</option>
103        <option value="1">SEEK_CUR</option>
104        <option value="2">SEEK_END</option>
105      </select>
106      <button>fseek</button>
107    </span>
108  </div>
109  <div class="function" id="fflush" hidden>
110    <span>
111      <select class="file-handle" id="fflushHandle"></select>
112      <button>fflush</button>
113    </span>
114  </div>
115  <div class="function" id="stat" hidden>
116    <span>
117      Filename:
118      <input type="text" id="statFilename">
119      <button>stat</button>
120    </span>
121  </div>
122  <hr>
123  <p><b>Directory Operations:</b></p>
124  <div>
125    <span>
126      <input type="radio" id="radioopendir" name="group">opendir
127      <input type="radio" id="radioreaddir" name="group">readdir
128      <input type="radio" id="radioclosedir" name="group">closedir
129      <input type="radio" id="radiomkdir" name="group">mkdir
130      <input type="radio" id="radiormdir" name="group">rmdir
131      <input type="radio" id="radiochdir" name="group">chdir
132      <input type="radio" id="radiogetcwd" name="group">getcwd
133    </span>
134  </div>
135  <div class="function" id="opendir" hidden>
136    <span>
137      Dirname:
138      <input type="text" id="opendirDirname">
139      <button>opendir</button>
140    </span>
141  </div>
142  <div class="function" id="readdir" hidden>
143    <span>
144      <select class="dir-handle" id="readdirHandle"></select>
145      <button>readdir</button>
146    </span>
147  </div>
148  <div class="function" id="closedir" hidden>
149    <span>
150      <select class="dir-handle" id="closedirHandle"></select>
151      <button>closedir</button>
152    </span>
153  </div>
154  <div class="function" id="mkdir" hidden>
155    <span>
156      Dirname:
157      <input type="text" id="mkdirDirname">
158      Mode (in octal):
159      <input type="text" id="mkdirMode" value="0644">
160      <button>mkdir</button>
161    </span>
162  </div>
163  <div class="function" id="rmdir" hidden>
164    <span>
165      Dirname:
166      <input type="text" id="rmdirDirname">
167      <button>rmdir</button>
168    </span>
169  </div>
170  <div class="function" id="chdir" hidden>
171    <span>
172      Dirname:
173      <input type="text" id="chdirDirname">
174      <button>chdir</button>
175    </span>
176  </div>
177  <div class="function" id="getcwd" hidden>
178    <span>
179      <button>getcwd</button>
180    </span>
181  </div>
182  <hr>
183  <p><b>Socket Operations:</b></p>
184  <div>
185    <span>
186      <input type="radio" id="radiogethostbyname" name="group">gethostbyname
187      <input type="radio" id="radiogetaddrinfo" name="group">getaddrinfo
188      <input type="radio" id="radioconnect" name="group">connect
189      <input type="radio" id="radiosend" name="group">send
190      <input type="radio" id="radiorecv" name="group">recv
191      <input type="radio" id="radioclose" name="group">close
192    </span>
193  </div>
194  <div class="function" id="gethostbyname" hidden>
195    <span>
196      Hostname:
197      <input type="text" id="gethostbynameName" value="google.com">
198      <button>gethostbyname</button>
199    </span>
200  </div>
201  <div class="function" id="getaddrinfo" hidden>
202    <span>
203      Hostname:
204      <input type="text" id="getaddrinfoName" value="google.com">
205      <select id="getaddrinfoFamily">
206        <option>AF_INET</option>
207        <option>AF_INET6</option>
208        <option>AF_UNSPEC</option>
209      </select>
210      <button>getaddrinfo</button>
211    </span>
212  </div>
213  <div class="function" id="connect" hidden>
214    <span>
215      Host:
216      <input type="text" id="connectHost" value="google.com">
217      Port:
218      <input type="text" id="connectPort" value="80">
219      <button>connect</button>
220    </span>
221  </div>
222  <div class="function" id="send" hidden>
223    <span>
224      <select class="sock-handle" id="sendHandle"></select>
225      Message:
226      <input type="text" id="sendMessage" value="Hello!">
227      <button>send</button>
228    </span>
229  </div>
230  <div class="function" id="recv" hidden>
231    <span>
232      <select class="sock-handle" id="recvHandle"></select>
233      Buffer Size:
234      <input type="text" id="recvBufferSize" value="256">
235      <button>recv</button>
236    </span>
237  </div>
238  <div class="function" id="close" hidden>
239    <span>
240      <select class="sock-handle" id="closeHandle"></select>
241      <button>close</button>
242    </span>
243  </div>
244  <hr>
245  <p><b>JavaScript Pipe Operations:</b></p>
246  <p>Type input while the focus is on this box the send input to the pipe
247  device:
248  <select id="pipe_name">
249    <option>jspipe1</option>
250    <option>jspipe2</option>
251    <option>jspipe3</option>
252  </select>
253  <input type="text" id="pipe_input_box"></p>
254  <p>Any output from the pipe will be printed below: <textarea id="pipe_output"></textarea></p>
255  <hr>
256  <p><b>Log:</b></p>
257  <pre id="log" style="font-weight: bold"></pre>
258  <!-- The NaCl plugin will be embedded inside the element with id "listener".
259      See common.js.-->
260  <div id="listener"></div>
261</body>
262</html>
263