-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexpress-ws.html
65 lines (65 loc) · 16.8 KB
/
express-ws.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- common.css -->
<style>* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-family: Arial, Helvetica, sans-serif;margin: 0;color: #333;word-wrap: break-word;}h1, h2, h3, h4, h5, h6 {line-height: 1.1;}img {max-width: 100% !important;}blockquote {margin: 0;padding: 0 15px;color: #777;border-left: 4px solid #ddd;}hr {background-color: #ddd;border: 0;height: 1px;margin: 15px 0;}code {font-family: Menlo, Consolas, 'Ubuntu Mono', Monaco, 'source-code-pro', monospace;line-height: 1.4;margin: 0;padding: 0.2em 0;font-size: 85%;background-color: rgba(0,0,0,0.04);border-radius: 3px;}pre > code {margin: 0;padding: 0;font-size: 100%;word-break: normal;background: transparent;border: 0;}ol {list-style-type: decimal;}ol ol, ul ol {list-style-type: lower-latin;}ol ol ol, ul ol ol, ul ul ol, ol ul ol {list-style-type: lower-roman;}table {border-spacing: 0;border-collapse: collapse;margin-top: 0;margin-bottom: 16px;}table th {font-weight: bold;}table th, table td {padding: 6px 13px;border: 1px solid #ddd;}table tr {border-top: 1px solid #ccc;}table tr:nth-child(even) {background-color: #f8f8f8;}input[type="checkbox"] {cursor: default;margin-right: 0.5em;font-size: 13px;}.task-list-item {list-style-type: none;}.task-list-item+.task-list-item {margin-top: 3px;}.task-list-item input {float: left;margin: 0.3em 1em 0.25em -1.6em;vertical-align: middle;}#tag-field {margin: 8px 2px 10px;}#tag-field .tag {display: inline-block;background: #cadff3;border-radius: 4px;padding: 1px 8px;color: black;font-size: 12px;margin-right: 10px;line-height: 1.4;}</style>
<!-- ace-static.css -->
<style>.ace_static_highlight {white-space: pre-wrap;}.ace_static_highlight .ace_gutter {width: 2em;text-align: right;padding: 0 3px 0 0;margin-right: 3px;}.ace_static_highlight.ace_show_gutter .ace_line {padding-left: 2.6em;}.ace_static_highlight .ace_line {position: relative;}.ace_static_highlight .ace_gutter-cell {-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;top: 0;bottom: 0;left: 0;position: absolute;}.ace_static_highlight .ace_gutter-cell:before {content: counter(ace_line, decimal);counter-increment: ace_line;}.ace_static_highlight {counter-reset: ace_line;}</style>
<style>.ace-xcode .ace_gutter {background: #e8e8e8;color: #333}.ace-xcode .ace_print-margin {width: 1px;background: #e8e8e8}.ace-xcode {background-color: #FFFFFF;color: #000000}.ace-xcode .ace_cursor {color: #000000}.ace-xcode .ace_marker-layer .ace_selection {background: #B5D5FF}.ace-xcode.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #FFFFFF;border-radius: 2px}.ace-xcode .ace_marker-layer .ace_step {background: rgb(198, 219, 174)}.ace-xcode .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #BFBFBF}.ace-xcode .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.071)}.ace-xcode .ace_gutter-active-line {background-color: rgba(0, 0, 0, 0.071)}.ace-xcode .ace_marker-layer .ace_selected-word {border: 1px solid #B5D5FF}.ace-xcode .ace_constant.ace_language,.ace-xcode .ace_keyword,.ace-xcode .ace_meta,.ace-xcode .ace_variable.ace_language {color: #C800A4}.ace-xcode .ace_invisible {color: #BFBFBF}.ace-xcode .ace_constant.ace_character,.ace-xcode .ace_constant.ace_other {color: #275A5E}.ace-xcode .ace_constant.ace_numeric {color: #3A00DC}.ace-xcode .ace_entity.ace_other.ace_attribute-name,.ace-xcode .ace_support.ace_constant,.ace-xcode .ace_support.ace_function {color: #450084}.ace-xcode .ace_fold {background-color: #C800A4;border-color: #000000}.ace-xcode .ace_entity.ace_name.ace_tag,.ace-xcode .ace_support.ace_class,.ace-xcode .ace_support.ace_type {color: #790EAD}.ace-xcode .ace_storage {color: #C900A4}.ace-xcode .ace_string {color: #DF0002}.ace-xcode .ace_comment {color: #008E00}.ace-xcode .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==) right repeat-y}</style>
<!-- export.css -->
<style>
body{margin:0 auto;max-width:800px;line-height:1.4}
#nav{margin:5px 0 10px;font-size:15px}
#titlearea{border-bottom:1px solid #ccc;font-size:17px;padding:10px 0;}
#contentarea{font-size:15px;margin:16px 0}
.cell{outline:0;min-height:20px;margin:5px 0;padding:5px 0;}
.code-cell{font-family:Menlo,Consolas,'Ubuntu Mono',Monaco,'source-code-pro',monospace;font-size:12px;}
.latex-cell{white-space:pre-wrap;}
</style>
<!-- User CSS -->
<style> .text-cell {font-size: 15px;}.code-cell {font-size: 12px;}.markdown-cell {font-size: 15px;}.latex-cell {font-size: 15px;}</style>
</head>
<body>
<div id="nav"><div>Next: <a href='WebSocket 範例程式.html'>WebSocket 範例程式</a>, Previous: <a href='Express 5.html'>Express 5</a>, Up: <a href='index.html'>Index</a></div></div>
<div id="titlearea">
<h2>express-ws</h2>
</div>
<div id="contentarea"><div class="cell markdown-cell"><p>用 <code>npm install express-ws</code> 安裝套件</p>
<p><code>express-ws</code> 會修改 <code>app</code> 使得他增加一個 <code>app.ws</code> 方法。</p>
</div><div class="cell code-cell"><div class="ace-xcode"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_string">'use strict'</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_storage ace_type">const</span> <span class="ace_identifier">express</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">require</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'express'</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_storage ace_type">const</span> <span class="ace_identifier">app</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">express</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_storage ace_type">const</span> <span class="ace_identifier">express_ws</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">require</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'express-ws'</span><span class="ace_paren ace_rparen">)</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">app</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_comment">// <span class="ace_cjk" style="width:20px">先</span><span class="ace_cjk" style="width:20px">對</span> WebSocket <span class="ace_cjk" style="width:20px">連</span><span class="ace_cjk" style="width:20px">線</span><span class="ace_cjk" style="width:20px">做</span><span class="ace_cjk" style="width:20px">認</span><span class="ace_cjk" style="width:20px">證</span></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">app</span><span class="ace_punctuation ace_operator">.</span><span class="ace_keyword">get</span><span class="ace_paren ace_lparen">(</span><span class="ace_string ace_regexp">/</span><span class="ace_constant ace_language ace_escape">.</span><span class="ace_string ace_regexp">websocket</span><span class="ace_constant ace_language ace_escape">.*$</span><span class="ace_string ace_regexp">/</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_storage ace_type">function</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">req</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_identifier">res</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_identifier">next</span><span class="ace_paren ace_rparen">)</span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_storage ace_type">console</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function ace_firebug">log</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'<span class="ace_cjk" style="width:20px">收</span><span class="ace_cjk" style="width:20px">到</span> WebSocket Upgrade Request <span class="ace_cjk" style="width:20px">了</span><span class="ace_cjk" style="width:20px">吧</span><span class="ace_cjk" style="width:20px">。</span>'</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_storage ace_type">const</span> <span class="ace_identifier">random</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_variable ace_language">Math</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function">abs</span><span class="ace_paren ace_lparen">(</span><span class="ace_variable ace_language">Math</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function">random</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">))</span> <span class="ace_keyword ace_operator">%</span> <span class="ace_constant ace_numeric">3</span> <span class="ace_keyword ace_operator">+</span> <span class="ace_constant ace_numeric">1</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_keyword">if</span> <span class="ace_paren ace_lparen">(</span><span class="ace_identifier">random</span> <span class="ace_keyword ace_operator">>=</span> <span class="ace_constant ace_numeric">2</span><span class="ace_paren ace_rparen">)</span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_storage ace_type">console</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function ace_firebug">log</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'<span class="ace_cjk" style="width:20px">拒</span><span class="ace_cjk" style="width:20px">絕</span><span class="ace_cjk" style="width:20px">了</span> WebSocket <span class="ace_cjk" style="width:20px">連</span><span class="ace_cjk" style="width:20px">線</span><span class="ace_cjk" style="width:20px">。</span>'</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">res</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">sendStatus</span><span class="ace_paren ace_lparen">(</span><span class="ace_constant ace_numeric">401</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_paren ace_rparen">}</span> <span class="ace_keyword">else</span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_storage ace_type">console</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function ace_firebug">log</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'<span class="ace_cjk" style="width:20px">接</span><span class="ace_cjk" style="width:20px">受</span><span class="ace_cjk" style="width:20px">了</span> WebSocket <span class="ace_cjk" style="width:20px">連</span><span class="ace_cjk" style="width:20px">線</span><span class="ace_cjk" style="width:20px">。</span>'</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">next</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_paren ace_rparen">}</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_paren ace_rparen">})</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_comment">// <span class="ace_cjk" style="width:20px">收</span><span class="ace_cjk" style="width:20px">到</span><span class="ace_cjk" style="width:20px">的</span><span class="ace_cjk" style="width:20px">訊</span><span class="ace_cjk" style="width:20px">息</span><span class="ace_cjk" style="width:20px">直</span><span class="ace_cjk" style="width:20px">接</span> Log <span class="ace_cjk" style="width:20px">出</span><span class="ace_cjk" style="width:20px">來</span> </span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">app</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">ws</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'/'</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_paren ace_lparen">(</span><span class="ace_identifier">ws</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_identifier">req</span><span class="ace_paren ace_rparen">)</span> <span class="ace_keyword ace_operator">=></span> <span class="ace_paren ace_lparen">{</span> <span class="ace_identifier">ws</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">on</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'message'</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_storage ace_type">console</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function ace_firebug">log</span><span class="ace_paren ace_rparen">)</span> <span class="ace_paren ace_rparen">})</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">app</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">listen</span><span class="ace_paren ace_lparen">(</span><span class="ace_constant ace_numeric">3000</span><span class="ace_paren ace_rparen">)</span>
</div></div></div></div><div class="cell markdown-cell"><p>就這樣，非常簡單。你可以用瀏覽器的 JavaScript 測試他。</p>
</div><div class="cell code-cell"><div class="ace-xcode"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_storage ace_type">var</span> <span class="ace_identifier">ws</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_keyword">new</span> <span class="ace_identifier">WebSocket</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'ws://localhost:3000/'</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">ws</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function">send</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'123'</span><span class="ace_paren ace_rparen">)</span>
</div></div></div></div><div class="cell markdown-cell"><p>我們的 Node 應用程式應該會記錄出 123。</p>
</div></div>
<script>document.body.onkeyup = function(e) {
if (e.keyCode === 39) window.location.href = 'WebSocket 範例程式.html';
if (e.keyCode === 37) window.location.href = 'Express 5.html';
}</script>
</body>
</html>