使用vscode搭建本地的websocket
首先在服务器方面，网上都有不同的对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文件来监听端口：
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> </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的更多相关文章
- webpack-dev-server 搭建本地服务以及浏览器实时刷新
一.概述开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器.有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要后 ...
- web前端效率提升-nginx+nodejs搭建本地生态
1.起因 编写的项目是一个偏向于后台管理的web系统,使用了angular框架,在绑定数据的时候就依赖于后台的接口格式. 以前是后台写好接口后,我在绑定,在这之前一些逻辑是没法做的,有时候后台接口给的 ...
- JAVA 基础开发环境 vscode 搭建 Windows下VSCode编译运行简单java
JAVA 基础开发环境 vscode 搭建 来源 https://www.cnblogs.com/freewsf/p/7744728.html 对于使用 Visual Studio Code 的 Ja ...
- 2019-04-03 Anaconda＋VSCode搭建python开发环境，并连接GIthub
1.最好的Python开发环境 :Anaconda+VSCode搭建python开发环境,conda提供了python开发环境和大量的你不用安装的库 conda的环境变量: 直接在conda 中下载启 ...
- CentOS6.5使用createrepo搭建本地源
本地搭建本地yum源采用的rpm全部来自CentOS-6.5-bin-DVD1&DVD2; 我的是在虚拟机环境安装,先检查我的操作系统版本: 1 2 3 4 [adam@ultraera ~] ...
- Dnsmasq安装与配置-搭建本地DNS服务器 更干净更快无广告DNS解析
默认的情况下,我们平时上网用的本地DNS服务器都是使用电信或者联通的,但是这样也导致了不少的问题,首当其冲的就是上网时经常莫名地弹出广告,或者莫名的流量被消耗掉导致网速变慢.其次是部分网站域名不能正常 ...
- iOS开发网络篇—搭建本地服务器
iOS开发网络篇—搭建本地服务器 一.简单说明 说明:提前下载好相关软件,且安装目录最好安装在全英文路径下.如果路径有中文名,那么可能会出现一些莫名其妙的问题. 提示:提前准备好的软件 apache- ...
- [转]World Wind Java开发之四——搭建本地WMS服务器
在提供地理信息系统客户端时,NASA还为用户提供了开源的WMS Server 服务器应用:World Wind WMS Server.利用这个应用,我们可以架设自己的WMS服务并使用自己的数据(也支持 ...
- 使用eclipse+tomcat搭建本地环境
项目开发工具很多,这里简单介绍下使用eclipse+tomcat如何搭建本地环境. 安装开发工具如下: 1. jdk的安装参考 下载地址:http://pan.baidu.com/s/1sj9rVYX ...
随机推荐
- Codeforces 1188C DP 鸽巢原理
题意:定义一个序列的beauty值为序列中元素之差绝对值的最小值,现在给你一个数组,问所有长度为k的子序列的beauty值的和是多少? 思路:(官方题解)我们先解决这个问题的子问题:我们可以求出bea ...
- jQuery HTML-设置
例子1 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...
- Python3.5-20190513-廖老师-自我笔记-函数式编程
把复杂的任务拆成各个小的函数,通过函数的调用来完成任务.这就是面向过程编程. 高阶函数:就是让函数的参数能够接收别的函数.把函数作为参数传入到另一个函数. 函数名也是变量.和变量用法一样的,指向一个函 ...
- 【leetcode】688. Knight Probability in Chessboard
题目如下: On an NxN chessboard, a knight starts at the r-th row and c-th column and attempts to make exa ...
- 确保数据零丢失!阿里云数据库RDS for MySQL 三节点企业版正式商用
2019年10月23号,阿里云数据库RDS for MySQL 三节点企业版正式商用,RDS for MySQL三节点企业版基于Paxos协议实现数据库复制,每个事务日志确保至少同步两个节点,实现任意 ...
- 【Flutter学习】事件处理与通知之事件处理
一,概述 移动应用中一个必不可少的环节就是与用户的交互,在Flutter中提供的手势检测为GestureDetector. Flutter中的手势系统分为二层: 第一层是触摸原事件(指针) Point ...
- win10 解决telnet不是内部或外部命令的方案
1.Telnet用于远程操作互联网中的设备或终端计算机服务器,可以有效的减少现场操作的麻烦.因为设备或终端是遍布整个省或市,有的甚至是国外,如何高效的处理问题是当务之急,除了telnet还可以ssh使 ...
- linux系统的文件保护
一些文件在Linux下看上去可能一切正常,但当您尝试删除的时候,居然也会报错,就像下边一样: [root@linux236 root]# ls -l 1.txt-rw-r--r-- 1 root ro ...
- 生成函数小结——[ EGF ][ ln 的一个套路 ][ 概率生成函数 ]
看了jcvb的WC2015交流课件.虽然没懂后面的复合逆部分,但生成函数感觉受益良多. 指数生成函数 集合中大小为 i 的对象的权值是 \( a_i \) ,该集合的生成函数是 \( \sum\lim ...
- 巴厘岛的雕塑（sculptures）
巴厘岛的雕塑(sculptures) 印尼巴厘岛的公路上有许多的雕塑,我们来关注它的一条主干道. 在这条主干道上一共有 N 座雕塑,为方便起见,我们把这些雕塑从 1 到 N 连续地进行标号,其中第 i ...