Nodejs搭建简单的websocket服务

简单的后台服务搭建流程

• 创建一个文件夹 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服务和前后端交互逻辑就完成了。

前端完整代码

后端完整代码