首先在服務器方面,網上都有不同的對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文件來監聽端口:
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源碼下載下來解壓並安裝:
地址:https://github.com/websockets/ws
npm install websocket
port處的端口號需要先掃描端口才能填寫,否則可能監聽失敗。在命令提示符下輸入
netstat -ano
即可獲取所有已占用端口的信息。
然后點一下調試,在彈出的調試環境下拉菜單里選nodejs,這時vscode會自動生成一個json文件:

此處需要在program后的引號中寫下js文件的地址。
按下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> </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>
打開命令行,切換到你的項目的目錄,輸入以下命令啟動服務器:
node server.js
打開client.html,在文本框中輸入任意字符串發送,服務器將收到的字符串輸出在命令行窗口中:

感興趣的朋友可以下載源碼調試:項目源碼。
寫這篇文章前我看過很多類似的文章,但針對新手的較少;代碼借鑒了一些比較優秀的項目。
