简单的后台服务搭建流程
- 创建一个文件夹
websocket-server
- 终端执行
cd
命令进入到websocket-server
文件夹 - 执行
yarn add nodejs-websocket
或npm install nodejs-websocket
,用以安装nodejs的websocket
模块 - 待模块安装完成后,在当前目录新建app.js文件
-
简单代码如下
- 创建服务的过程和使用
http
模块创建服务的过程类似,终端执行node app.js
,可以看到终端打印出,监听了端口3000,这样一个简单的websocket后台服务就创建完了。
前端与websocket服务建立连接
- 在当前目录下创建index.html文件
- 在
body
标签中写入代码
- 在
script
标签中写入如下代码获取dom元素
-
如下为websocket的事件API
-
前端创建一个websocket连接,并监听websocket的open事件
这里的地址不是http协议,而是websocket
- 用vscode的live server 打开index.html文件,看到浏览器如下

这标志着我们与后端的websocket服务成功建立了连接,这时打开开发人员工具
可以在图示位置看到我们与后端websocket建立的连接

在往下进行之前,要先对后端的代码进行一些异常处理,不然我们每次页面一刷新,后端会直接报错并停掉服务。
在app.js文件中添加如下代码

这两段代码分别是对连接关闭时和异常的事件进行处理,对两个事件进行处理之后,我们前端进行访问才不会报错
前后端数据交互
- 在
button
上监听一个点击事件,调用websocket的send()
方法向后端发送input的内容
- 点击按钮,打开控制台,可以看到我们发送的数据

-
后端接收数据处理,并返回给前端
- 接受到前端发送的数据后,将字母转为大写返回给前端
前端代码添加如下逻辑
![]()
-
input输入内容,点击按钮,效果如下图
红色内容为后端返回的内容,绿色内容为我们发送给后端的内容。
至此,一个简单的websocket服务和前后端交互逻辑就完成了。
前端完整代码
![]()
后端完整代码
![]()
网友评论