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

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

这里我安装的是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，在文本框中输入任意字符串发送，服务器将收到的字符串输出在命令行窗口中：

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

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

使用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. 迄今为止把同步/异步/阻塞/非阻塞/BIO/NIO/AIO讲的这么清楚的好文章（快快珍藏）

    常规的误区 假设有一个展示用户详情的需求,分两步,先调用一个HTTP接口拿到详情数据,然后使用适合的视图展示详情数据. 如果网速很慢,代码发起一个HTTP请求后,就卡住不动了,直到十几秒后才拿到HTT ...

  2. 使用IntelliJ IDEA 15和Maven创建Java Web项目（转）

    转自:https://blog.csdn.net/myarrow/article/details/50824793 1. Maven简介 相对于传统的项目,Maven 下管理和构建的项目真的非常好用和 ...

  3. (PASS)JAVA数组去重 三种方法 (不用集合)

    第一种方法(只学到数组的看): 定义一个新的数组长度和旧数组的长度一样,存储除去重复数据的旧数组的数据和0, package demo01; import java.sql.Array; import ...

  4. PHP7.1以上版本 count()报错

    报错信息如下: count(): Parameter must be an array or an object that implements Countable (View: D:\fookusy ...

  5. 简单的51单片机多任务操作系统（C51）

    在网上看到这段代码,所以自己尝试了,可以跑起来,但是没有精确的定时功能,仅仅是任务的调度而已. 数组中是11,而不是12.这里写错了... /* 简单的多任务操作系统 其实只有个任务调度切换,把说它是 ...

  6. python3 实现简单ftp服务功能（服务端 For Linux）

    转载请注明出处! 功能介绍: 可执行的命令: lspwdcd put rm get mkdir 1.用户加密认证 2.允许多用户同时登陆 3.每个用户有自己的家目录,且只可以访问自己的家目录 4.运行 ...

  7. 卸载Anaconda

    conda install anaconda-clean anaconda-clean --yes Anaconda 安装的时候在 .bash_profile中添加了变量: export PATH=& ...

  8. demo_service

    <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit ...

  9. MUI 自定义从底部弹出的弹出框内容

    最近做的项目都是在使用mui做手机网页,大致是下面的这种弹出效果 首先,引入 mui.css或者mui.min.css 引入 mui.min.js或者mui.js 第二步:<a href=&qu ...

  10. Database基础(一)：构建MySQL服务器、 数据库基本管理 、MySQL 数据类型、表结构的调整

    一.构建MySQL服务器 目标: 本案例要求熟悉MySQL官方安装包的使用,快速构建一台数据库服务器: 安装MySQL-server.MySQl-client软件包 修改数据库用户root的密码 确认 ...