使用基于node的express脚手架搭建后台服务器和前端vue实现websocket简单通信

3 篇文章 0 订阅
2 篇文章 0 订阅

一、背景和实现目标

背景:
后端使用基于nodejs下搭建的express脚手架,使用安装第三方包ws
前端使用vue
实现目标:
前后端简单通信

二、后台搭建express脚手架和编写websocket方法

1.新建一个文件夹,存放express,打开黑窗口初始化项目,生成package.json文件,用于记录安装的包
npm init -y
2.下载安装express
npm install express
3.在目录下新建websocket.js文件,搭建websocket服务
const WebSocket = require('ws') //引入ws模块
// 创建websocket服务端对象,端口号为9998
// 为ws创建一个接口,就是连接websocket的链接
const wss = new WebSocket.Server({ 
    port:9998
})
// 导出监听方法
module.exports.listener = () =>{
    // 监听到后,触发connection事件
    // 对客户端连接事件进行监听,只要有WebSocket连接到该服务器,就会触发'connection'事件
    // ws代表的是客户端的连接的socket对象;req对象可以用来获取客户端的信息,如ip、端口号
    wss.on('connection',(ws,req)=>{
        console.log('连接成功',ws,req)
        // 若要获取所有已连接的客户端信息,则可以使用server.clients数据集
        ws.on('message',(msg)=>{
            console.log('客户端发送给服务器',msg)
            // 当客户端连接成功后会发送一条消息给服务器,服务器监听到消息后返回给客户端
            const data = ["1","2","3","4"]
            let i = 0
            setInterval(()=>{
                if(i === data.length){
                    i = 0
                }
                // 发送数据调用send方法
                ws.send(JSON.stringify(data[i]))
                i++
            },2000)
        })
        // 监听要关闭连接的函数
        ws.on('close',function close(){
            // 关闭逻辑
            console.log('WebSocket连接已关闭')
        })
    })
}

三、在express中搭建服务器并注入websocket方法

1.在目录下新建index.js文件,引入express框架,并在js文件中使用websocket,并监听开启的websocket服务器
const express = require("express") //引入express框架
const app = express()//创建一个express实例,可以配置和定义路由、中间件、启动服务器
const port = 3001
// 可以再浏览器中访问http://localhost:3001/并看到你的应用响应
// 这里使用express.static函数,托管静态资源的内置中间件
app.use('/',express.static('public')) //酌情使用,这里只做介绍,并未使用,与通讯无关哈
app.use(express.json())//解析 JSON 格式的请求体数据
// 监听端口
app.listen(port,()=>{
    console.log('server is running , port is ' + port)
})
// 监听开启的websocket服务器
const websocketServer = require('./websocket')
websocketServer.listener()
2.启动服务器,在express文件目录中打开黑窗口,输入命令
node index.js
注意:index.js为引入express框架的js文件,根据自己的项目名称更换命令

四、前端使用vue框架实现websocket通信

在vue项目的一个页面中,实现通信,代码如下:

<template>
  <div class="tests">
    <div>{{ datas }}</div>
  </div>
</template>
<script>
const ws = new WebSocket("ws://localhost:9998"); //引入ws
export default {
  data() {
    return {
      datas: "",
    };
  },
  methods: {
    getwebsocketData() { //websocket方法
      ws.onopen = () => {
        console.log("服务器链接成功");
        ws.send("Hello websocket");
      };
      ws.onerror = () => {
        console.log("服务器链接失败");
      };
      ws.onmessage = (msg) => {
        console.log("接收到服务端发送消息");
        console.log(msg, "msggggg");
        console.log(JSON.parse(msg.data), "解析后data");
        this.datas = JSON.parse(msg.data);
      };
    },
  },
  mounted() {
    this.getwebsocketData();//初始化websocket方法
  },
  beforeDestroy() {
    ws.onclose = () => { //关闭websocket
      console.log("websocket关闭");
    };
  },
};
</script>
<style scoped>
.tests {
  border: 1px solid red;
  width: calc(100vw - 10vw);
  height: calc(100vh - 10vh);
  margin: 0 auto;
  line-height: calc(100vh - 10vh);
  font-size: 10vw;
}
</style>

  • 10
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值