First, the server side, the Internet has different websocket support of servers:
- php - http://code.google.com/p/phpwebsocket/
- Jetty - http://jetty.codehaus.org/jetty/ (version 7 began to support 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 support websocket, we suggested tomcat8,7.0.27 Interface outdated)
- WebLogic - began to support 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
Above is an excerpt: rookie tutorial , you can decide which server installation environment configuration to your liking.
Here I installed nodejs environment, installation tutorial: rookie Tutorial
Let's start into the topic. Open vscode, create a new folder, then create a new server.js file in this folder to the listening port:
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 });
Which require ( 'ws') websocket source to be present in the current directory, directly on the source github websocket decompressed file in the directory to:
Address: https://github.com/websockets/ws
Port port number at the port in order to fill in the need to scan, monitor or it may fail. Enter at the command prompt
netstat -ano
You can get all the information occupied port.
Then tap debugging, debugging environment in the pop-up drop-down menu, choose nodejs, then vscode will automatically generate a json file:
此处需要在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,在文本框中输入任意字符串发送,服务器将收到的字符串输出在命令行窗口中:
感兴趣的朋友可以下载源码调试:项目源码。
写这篇文章前我看过很多类似的文章,但针对新手的较少;代码借鉴了一些比较优秀的项目。