vscode搭建ajax本地服务器,使用vscode搭建本地的websocket

首先在服务器方面，网上都有不同的对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源码下载下来解压并安装：

npm install websocket

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

netstat -ano

即可获取所有已占用端口的信息。

然后点一下调试，在弹出的调试环境下拉菜单里选nodejs，这时vscode会自动生成一个json文件：

此处需要在program后的引号中写下js文件的地址。

按下F5调试，若无问题可继续下一步：

新建一个client.html文件：

1

2

3

4

WebSocket Echo Demo

5

6

7

8

9

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

26

27

28

29

30

31

32

33

34

35 placeholder="Type text to echo in here" value="" />

36

37

38 οnclick="sendMessage();">

39 Send!

40

41

42

43

44

45

46

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

node server.js

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

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

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

来源：https://www.cnblogs.com/wdz-/p/11019414.html