使用vscode搭建本地的websocket

時間 2019-11-16

標籤使用 vscode 搭建本地 websocket 简体版

原文原文鏈接

首先在服務器方面，網上都有不一樣的對websocket支持的服務器：php

php - http://code.google.com/p/phpwebsocket/
jetty - http://jetty.codehaus.org/jetty/（版本7開始支持websocket）
netty - http://www.jboss.org/netty
ruby - http://github.com/gimite/web-socket-ruby
Kaazing - https://web.archive.org/web/20100923224709/http://www.kaazing.org/confluence/display/KAAZING/Home
Tomcat - http://tomcat.apache.org/（7.0.27支持websocket，建議用tomcat8，7.0.27中的接口已通過時）
WebLogic - http://www.oracle.com/us/products/middleware/cloud-app-foundation/weblogic/overview/index.html（12.1.2開始支持）
node.js - https://github.com/Worlize/WebSocket-Node
node.js - http://socket.io
nginx - http://nginx.com/
mojolicious - http://mojolicio.us/
python - https://github.com/abourget/gevent-socketio
Django - https://github.com/stephenmcd/django-socketio
erlang - https://github.com/ninenines/cowboy.git

以上內容摘自：菜鳥教程，你們能夠根據本身的喜愛決定安裝配置哪一個服務器環境。css

這裏我安裝的是nodejs環境，安裝教程：菜鳥教程html

下面開始進入正題。打開vscode，新建一個文件夾，再在此文件夾下新建一個server.js文件來監聽端口：html5

1 var WebSocketServer = require('ws').Server,
2 wss = new WebSocketServer({ port: 8181 });
3 wss.on('connection', function (ws) {
4     console.log('client connected');
5     ws.on('message', function (message) {
6         console.log(message);
7     });
8 });

其中的require('ws')要求配置好websocket環境，咱們將github上的websocket源碼下載下來解壓並安裝：node

地址：https://github.com/websockets/wspython

npm install websocket

port處的端口號須要先掃描端口才能填寫，不然可能監聽失敗。在命令提示符下輸入jquery

netstat -ano

便可獲取全部已佔用端口的信息。nginx

而後點一下調試，在彈出的調試環境下拉菜單裏選nodejs，這時vscode會自動生成一個json文件：git

此處須要在program後的引號中寫下js文件的地址。github

按下F5調試，若無問題可繼續下一步：

新建一個client.html文件：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <title>WebSocket Echo Demo</title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1"/>
 6     <link href="../bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
 7     <script src="../js/jquery-1.12.3.min.js"></script>
 8     <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>
 9     <script>
10     var ws = new WebSocket("ws://localhost:8181");
11     ws.onopen = function (e) {
12         console.log('Connection to server opened');
13     }
14     function sendMessage() {
15         ws.send($('#message').val());
16     }
17     var WebSocketServer = require('ws').Server,
18     wss = new WebSocketServer({ port: 8181 });
19     wss.on('connection', function (ws) {
20         console.log('client connected');
21         ws.on('message', function (message) {
22             console.log(message);
23         });
24     });
25     </script>
26 </head>
27 
28 <body >
29     <div class="vertical-center">
30         <div class="container">
31             <p>&nbsp;</p>
32             <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
33                 <div class="form-group">
34                     <input class="form-control" type="text" name="message" id="message"
35                            placeholder="Type text to echo in here" value="" />
36                 </div>
37                 <button type="button" id="send" class="btn btn-primary"
38                         onclick="sendMessage();">
39                     Send!
40                 </button>
41             </form>
42         </div>
43     </div>
44     <div id="info"></div>
45 </body>
46 </html>