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

这篇具有很好参考价值的文章主要介绍了vue和node使用websocket实现数据推送,实时聊天。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

     npm init -y

2.安装express、socket.io、cors

npm install express socket.io cors -S

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

使用node ./app.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 3000');
});

4.前端使用socket.io-client

npm install socket.io-client

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

<template>
    <div class="content-box">
        <div class="container">
          {{ data }}
           <el-button @click="gasong">发送</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() {
      // 解决跨域问题
      socket  = io('http://localhost:3000', {
            transports: ['websocket'],
            withCredentials: true,//白名单
            extraHeaders: {//请求头
                'Access-Control-Allow-Origin': 'http://localhost:8081'
            }
        });
        socket.on('data', data => {
            this.data = data;
        });
        socket.on("messagedata",msg=>{
          this.msgdata=msg;
        })
    },
    methods: {
        gasong(){
          socket.send('Hello from client!');
        }
    }
};
</script>

<style lang="scss" scoped></style>

5.效果

默认如下:

vue实现消息实时推送,后端,vue,vue.js,websocket,前端id为243 在数据库改为245前端不需要刷新页面,数据直接改掉了

vue实现消息实时推送,后端,vue,vue.js,websocket,前端

点击发送后,后端收到消息,再把消息推送给前端

vue实现消息实时推送,后端,vue,vue.js,websocket,前端

 vue实现消息实时推送,后端,vue,vue.js,websocket,前端

 文章到此结束,希望对你有所帮助~文章来源地址https://www.toymoban.com/news/detail-605640.html

到了这里,关于vue和node使用websocket实现数据推送,实时聊天的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webSocket及使用webSocket实现实时聊天通信

    webSocket在开始的时候依旧使用的是http协议,只不过后面保持tcp持久链接,是一种全双工通信。webSockets和http很像,它的请求url用的是ws、wss,对应http、https 初始化 npm init -y 安装ws依赖 npm i --save ws 写服务器代码 服务器启动 node server.js 配置前端代码,即告诉浏览器这个请求不要

    2023年04月11日
    浏览(40)
  • webSocket实现数据的实时推送(附:前后端代码)

            之前开发的一个管理系统项目中,首页是数据大屏展示,一开始我是用JS的 setInterval() 方法,设置一个时间,每过时间发起一次 ajax 请求。虽然也能凑活着用,但总感觉不是最优的方法,而且还比较占用资源,所以学习 WebSocke ,以下是本人的一些学习心得及前后端的

    2024年02月02日
    浏览(51)
  • WebSocket:实现实时互动、数据推送的利器,你了解多少

    WebSocket技术是一种基于TCP协议的全双工通信协议,它允许浏览器和服务器之间进行实时、双向的通信。相比传统的HTTP请求-响应模式,WebSocket提供了持久连接,可以实时地推送数据,减少了通信的延迟。 WebSocket的工作原理是通过建立一条持久连接来实现实时通信。首先,浏览

    2024年01月18日
    浏览(46)
  • 【Spring Boot 实现 WebSocket实时数据推送-服务端】

    一、WebSocket配置类 二、WebSocket服务端类 三、WebSocket的连接池类 四、启动Spring Boot服务 五、测试WebSocket连接 WebSocket在线测试工具: http://www.easyswoole.com/wstool.html 测试连接 服务地址:ws://172.18.42.29:14785/endPoint/1 服务启动的IP:172.18.42.29 服务端口:14785 WS的URl:/endPoint 入参:1 六

    2023年04月25日
    浏览(42)
  • 记录--你还在使用websocket实现实时消息推送吗?

    在日常的开发中,我们经常能碰见服务端需要主动推送给客户端数据的业务场景,比如数据大屏的实时数据,比如消息中心的未读消息,比如聊天功能等等。 本文主要介绍SSE的使用场景和如何使用SSE。 我们常规实现这些需求的方案有以下三种 轮询 websocket SSE 在很久很久以前

    2024年02月19日
    浏览(40)
  • uniapp(vue3)+node.js+websocket(实现实时通信效果)

    文章目录 概要 整体架构流程 技术名词解释 技术细节 小结 uniapp基于vue3,小程序的聊天功能 项目是基于node.js服务器搭建的简易双向通信网页,实现了实时更新在线人数以及用户间即时通讯的功能。 后台接口代码 1、首先我们可以通过Express 应用程序生成器快速搭建一个后台

    2024年03月26日
    浏览(56)
  • 【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室

    这篇文章主要是用WebSocket技术实现一个 即时通讯聊天室 ,首先先要了解为什么使用WebSocket而不是普通的HTTP协议,如果使用HTTP协议它是下面这种情况: 我发送一条消息,发送一个发送消息的请求;* 一直轮询接收别人发送的消息,不管有没有发送都要定时去调用接口。这里明

    2023年04月20日
    浏览(63)
  • 如何在Node.js中使用WebSocket实现实时通信

    在Web应用程序中,实时通信已经成为一种必不可少的功能。WebSocket是一种基于TCP的协议,它提供了双向通信的能力,使得实时通信变得更加容易。Node.js提供了一个内置的WebSocket模块,使得开发实时通信应用程序变得非常简单。在本文中,我将介绍如何在Node.js中使用WebSocket实

    2024年02月14日
    浏览(47)
  • 如何使用websocket+node.js实现pc后台与小程序端实时通信

    实现功能:实现pc后台与小程序端互发通信能够实时检测到 1.安装ws依赖 2.创建index.js 3.打开终端,启动服务 这里是手动点击连接按钮,发起的websocket连接,可自行更改到其他合适的地方连接websocket 1.创建两个按钮,连接按钮,发送按钮 2.定义事件,连接ws

    2024年02月03日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包