使用vscode搭建本地的websocket

首先在服务器方面，网上都有不同的对websocket支持的服务器：

• 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

以上内容摘自：菜鸟教程，大家可以根据自己的喜好决定安装配置哪个服务器环境。

这里我安装的是nodejs环境，安装教程：菜鸟教程

下面开始进入正题。打开vscode，新建一个文件夹，再在此文件夹下新建一个server.js文件来监听端口：

 var WebSocketServer = require('ws').Server,
 wss = new WebSocketServer({ port: 8181 });
 wss.on('connection', function (ws) {
     console.log('client connected');
     ws.on('message', function (message) {
         console.log(message);
     });
 });

其中的require('ws')要求配置好websocket环境，我们将github上的websocket源码下载下来解压并安装：

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

npm install websocket

port处的端口号需要先扫描端口才能填写，否则可能监听失败。在命令提示符下输入

netstat -ano

即可获取所有已占用端口的信息。

然后点一下调试，在弹出的调试环境下拉菜单里选nodejs，这时vscode会自动生成一个json文件：

此处需要在program后的引号中写下js文件的地址。

按下F5调试，若无问题可继续下一步：

新建一个client.html文件：

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>WebSocket Echo Demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link href="../bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
     <script src="../js/jquery-1.12.3.min.js"></script>
     <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>
     <script>
     var ws = new WebSocket("ws://localhost:8181");
     ws.onopen = function (e) {
         console.log('Connection to server opened');
     }
     function sendMessage() {
         ws.send($('#message').val());
     }
     var WebSocketServer = require('ws').Server,
     wss = new WebSocketServer({ port: 8181 });
     wss.on('connection', function (ws) {
         console.log('client connected');
         ws.on('message', function (message) {
             console.log(message);
         });
     });
     </script>
 </head>

 <body >
     <div class="vertical-center">
         <div class="container">
             <p>&nbsp;</p>
             <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
                 <div class="form-group">
                     <input class="form-control" type="text" name="message" id="message"
                            placeholder="Type text to echo in here" value="" />
                 </div>
                 <button type="button" id="send" class="btn btn-primary"
                         onclick="sendMessage();">
                     Send!
                 </button>
             </form>
         </div>
     </div>
     <div id="info"></div>
 </body>
 </html>

打开命令行，切换到你的项目的目录，输入以下命令启动服务器：

node server.js

打开client.html，在文本框中输入任意字符串发送，服务器将收到的字符串输出在命令行窗口中：

感兴趣的朋友可以下载源码调试：项目源码。

写这篇文章前我看过很多类似的文章，但针对新手的较少；代码借鉴了一些比较优秀的项目。