使用vscode搭建本地的websocket
阅读原文时间:2023年07月09日阅读:3

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


WebSocket Echo Demo


 








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

node server.js

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

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

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