首先在服务器方面，网上都有不同的对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

  1. npm install websocket

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

  1. 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>

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

  1. node server.js

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

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

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

使用vscode搭建本地的websocket的更多相关文章

  1. webpack-dev-server 搭建本地服务以及浏览器实时刷新

    一.概述开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器.有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要后 ...

  2. web前端效率提升-nginx+nodejs搭建本地生态

    1.起因 编写的项目是一个偏向于后台管理的web系统,使用了angular框架,在绑定数据的时候就依赖于后台的接口格式. 以前是后台写好接口后,我在绑定,在这之前一些逻辑是没法做的,有时候后台接口给的 ...

  3. JAVA 基础开发环境 vscode 搭建 Windows下VSCode编译运行简单java

    JAVA 基础开发环境 vscode 搭建 来源 https://www.cnblogs.com/freewsf/p/7744728.html 对于使用 Visual Studio Code 的 Ja ...

  4. 2019-04-03 Anaconda＋VSCode搭建python开发环境，并连接GIthub

    1.最好的Python开发环境 :Anaconda+VSCode搭建python开发环境,conda提供了python开发环境和大量的你不用安装的库 conda的环境变量: 直接在conda 中下载启 ...

  5. CentOS6.5使用createrepo搭建本地源

    本地搭建本地yum源采用的rpm全部来自CentOS-6.5-bin-DVD1&DVD2; 我的是在虚拟机环境安装,先检查我的操作系统版本: 1 2 3 4 [adam@ultraera ~] ...

  6. Dnsmasq安装与配置-搭建本地DNS服务器 更干净更快无广告DNS解析

    默认的情况下,我们平时上网用的本地DNS服务器都是使用电信或者联通的,但是这样也导致了不少的问题,首当其冲的就是上网时经常莫名地弹出广告,或者莫名的流量被消耗掉导致网速变慢.其次是部分网站域名不能正常 ...

  7. iOS开发网络篇—搭建本地服务器

    iOS开发网络篇—搭建本地服务器 一.简单说明 说明:提前下载好相关软件,且安装目录最好安装在全英文路径下.如果路径有中文名,那么可能会出现一些莫名其妙的问题. 提示:提前准备好的软件 apache- ...

  8. [转]World Wind Java开发之四——搭建本地WMS服务器

    在提供地理信息系统客户端时,NASA还为用户提供了开源的WMS Server 服务器应用:World Wind WMS Server.利用这个应用,我们可以架设自己的WMS服务并使用自己的数据(也支持 ...

  9. 使用eclipse+tomcat搭建本地环境

    项目开发工具很多,这里简单介绍下使用eclipse+tomcat如何搭建本地环境. 安装开发工具如下: 1. jdk的安装参考 下载地址:http://pan.baidu.com/s/1sj9rVYX ...

随机推荐

  1. php函数练习20191031

    <?php$str="what is you name?";$arr=array('i','s');$arr_1=array('s','i');//是先后替换的.echo s ...

  2. js与html中unicode编码的使用

    js中 // unicode在字符串中使用格式:\u四位编码,一定是四位,否则报错 // 显示 @ 符 console.log(`十六进制 unicode 编码 0x0040 对应的字符是:${'\u ...

  3. c# 编程--数组例题

    1.输入十个学生的成绩,找出最高分 #region 输入十个学生的成绩,找出最高分 //输入十个学生的成绩,找出最高分 ]; ; i < ; i++) { ; Console.Write(&qu ...

  4. .net core mvc model填充过滤器

    在程序开发中,我们可能经常遇到所有的数据库表有相同的属性和行为,比如需要记录数据的创建人员,创建时间,修改时间和修改人.如果在每个action中都加上这些信息,代码看着比较冗余,看着不那么优雅,于是考 ...

  5. go语言从例子开始之Example26.通道选择器

    Go 的通道选择器 让你可以同时等待多个通道操作.Go 协程和通道以及选择器的结合是 Go 的一个强大特性. Example: package main import "time" ...

  6. Kotlin之let,apply,with,run函数区别（转）

    转自:https://blog.csdn.net/guijiaoba/article/details/54615036 Kotlin之let,apply,with,run函数区别 重新整理 重新整理了 ...

  7. 【Database】MySQL实战45讲

    01 | 基础架构:一条SQL查询语句是如何执行的? 1. MySQL 的基本架构图: MySQL可以分成: Server层 和 存储引擎层 两部分. Server层:包含连接器.查询缓存.分析器.优 ...

  8. JavaScript设计模式小抄集(持续更新)

    前言 本文旨在记录JavaScript中常用的设计模式代码片段,简要说明使用场景,不过于追究细节.在设计模式开篇之前,还是先要搞清楚JavaScript中关于面向对象的基础知识,可以先看看JavaSc ...

  9. SpringBoot搭建基于Apache Shiro+Redis的分布式Session共享功能

    我们在上一遍文档中已经完成了Shiro验证功能.(http://www.cnblogs.com/nbfujx/p/7773789.html),在此基础上我们将完成分布式Session共享功能. Red ...

  10. PIC16F877A的TIME0学习

    计算溢出时间根据晶振频率4Mhz,TMR0=6,PSA2~PSA0 = 1:4. 因为好像外部晶振在给PIC的时候多分了一次1:4.所以PSA2~PSA0取1:4刚好 数完250次的时间=(1/4Mh ...