美文网首页前端技术栈
Nodejs搭建简单的websocket服务

Nodejs搭建简单的websocket服务

作者: 飞天御剑流co | 来源:发表于2021-01-13 15:37 被阅读0次

简单的后台服务搭建流程

  • 创建一个文件夹 websocket-server
  • 终端执行cd命令进入到websocket-server文件夹
  • 执行yarn add nodejs-websocketnpm 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服务和前后端交互逻辑就完成了。

前端完整代码


后端完整代码


相关文章

网友评论

    本文标题:Nodejs搭建简单的websocket服务

    本文链接:https://www.haomeiwen.com/subject/fivuaktx.html