首页 > Web开发 > 详细

使用vscode搭建本地的websocket

时间:2019-06-13 21:08:55      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:引号   sockets   ole   服务器环境   sub   rac   进入   container   get   

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

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

这里我安装的是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

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>&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>

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

node server.js

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

技术分享图片

 

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

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

使用vscode搭建本地的websocket

标签:引号   sockets   ole   服务器环境   sub   rac   进入   container   get   

原文:https://www.cnblogs.com/wdz-/p/11019414.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号