vue和node使用websocket实现数据推送,实时聊天

需求:node做后端根据websocket,连接数据库,数据库的字段改变后,前端不用刷新页面也能更新到数据,前端也可以发送消息给后端,后端接受后把前端消息做处理再推送给前端展示

1.初始化node,生成package.json和package-lock.js

复制代码
 npm init -y

2.安装express、socket.io、cors

3.创建app.js并编写代码

使用node ./websocket.js运行项目

复制代码
npm install express socket.io cors -S

建立websocket.js

复制代码
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
const fs = require('fs');
const cors = require('cors');
// 使用 cors 中间件允许跨域请求
// 配置跨域选项
const corsOptions = {
  origin: '*', // 指定允许的来源
  methods: ['GET', 'POST'], // 允许的请求方法
  credentials: true // 允许发送凭据(如 cookies)
};
app.use(cors(corsOptions));
// 创建数据库连接
const mysql = require('mysql');
const connection = mysql.createConnection({
  host: 'localhost',//数据库连接域名
  user: 'root',//数据库账号
  password: '123456',//密码
  database: 'graduation_design'//要连接的数据库名
});
connection.connect();
 
// 监听客户端连接事件
io.on('connection', (socket) => {
  console.log('A client connected');
  //查询表
  connection.query('SELECT * FROM shelves', (error, results) => {
    if (error) throw error;
    //数据推送到前端
    socket.emit('data', results);
  },)
  // 发送数据到客户端
  setInterval(() => {
    // 查询数据库并发送数据到客户端
    connection.query('SELECT * FROM shelves', (error, results) => {
      if (error) throw error;
      socket.emit('data', results);
    },)
  }, 60 * 1000);
  //接收到客户端的消息后再推送给客户端
  socket.on('message', (message) => {
    console.log('接收到客户端消息:', message);
    socket.emit("messagedata", message);
  })
 
  // 监听客户端断开连接事件
  socket.on('disconnect', () => {
    console.log('A client disconnected');
  });
});
 
// 启动服务器
http.listen(3000, () => {
  console.log('WebSocket server is running on port 3333');
});

4.前端使用socket.io-client

复制代码
npm install socket.io-client

在需要使用websocket连接的页面引入

复制代码
<template>
    <div class="content-box">
        <div class="container">
            {{ data }}
            <el-button @click="connectWebscoket">连接websocket</el-button>
            <el-button @click="gasong">发送</el-button>
            <el-button @click="stop">停止连接</el-button>
            <hr />
            {{ msgdata }}
        </div>
    </div>
</template>
 
<script>
import io from 'socket.io-client'
let socket = null
export default {
    data() {
        return {
            data: null,
            msgdata: ''
        }
    },
    mounted() {},
    methods: {
        connectWebscoket() {
            // 解决跨域问题
            socket = io('http://localhost:3333', {
                transports: ['websocket'],
                withCredentials: true, //白名单
                extraHeaders: {
                    //请求头
                    'Access-Control-Allow-Origin': 'http://localhost:8080'
                }
            })
            socket.on('data', (data) => {
                this.data = data
            })
            socket.on('messagedata', (msg) => {
                this.msgdata = msg
            })
        },
        gasong() {
            socket.send('Hello from client!')
        },
        stop() {
            socket.close()
        }
    }
}
</script>
 
<style lang="scss" scoped></style>

此时已经建立好websocket的连接

相关推荐
华仔啊7 分钟前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
炒毛豆40 分钟前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
Bacon1 小时前
前端:从0-1实现一个脚手架
前端
Bacon1 小时前
前端项目部署实战 nginx+docker持续集成
前端
beckyye1 小时前
阿里云智能语音简单使用:语音识别
前端·语音识别·录音
东东2331 小时前
前端规范工具之husky与lint-staged
前端·javascript·eslint
jump6801 小时前
手写事件总线、事件总线可能带来的内存泄露问题
前端
岁月宁静2 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
执沐2 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
#做一个清醒的人2 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm