Vue中如何利用websocket实现实时通讯

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

首先我们可以先做一个简单的例子来学习一下简单的websocket模拟聊天对话的功能

原理很简单,有点像VUE中的EventBus,用emit和on传来传去

首先我们可以先去自己去用node搭建一个本地服务器

步骤如下

1.新建一个app.js,然后创建pagejson.js文件,输入以下指令

npm init -y

2.下载 express包

pnpm  i  express

3.在app.js里面去进行导包创建express实例

 

const  express=require('express')
const  app=express()
app.get('/',(req,res)=>{
  res.send('1111')
})
app.listen(2000,()=>{
  console.log('http://127.0.0.1:2000');
})

4.重启服务器,我们可以利用postman或者其他调试接口的工具去看是否接收到了数据

注意:这个上面的ip地址要写自己本机的ip,可以在小黑窗中输入 ipconfig  获取自己的ip

Vue中如何利用websocket实现实时通讯

 5.下载socket.io包

pnpm  i  socket.io

6.在app.js里面导包

const  express=require('express')
const  app=express()
// app.get('/',(req,res)=>{
//   res.send('1111')
// })
const http = require('http').createServer(app)
const io = require('socket.io')(http, { cors: true }) //创建了一个websocket服务器 并且解决了跨域
io.on('connection', (socket) => {
  // 客户端链接成功
  console.log('~connection~')
 
})
// 客户端那边传过来的事件接收
// 注意这个地方之前的app改为http
http.listen(2000,'192.168.72.80',()=>{
  console.log('http://192.168.72.80:2000');
})

 搭建完毕后,可以去创建两个html文件

然后去做实时通信

Vue中如何利用websocket实现实时通讯

 

 服务器里面去接收自定义事件

Vue中如何利用websocket实现实时通讯

然后再通过io里面的emit方法,给另外一个页面发送自定义事件,然后用socket.on去接收自定义事件,代码放在下面,里面的ip改成自己的,就可以实现模拟聊天功能文章来源地址https://www.toymoban.com/news/detail-401285.html

app.js

const  express=require('express')
const  app=express()
// app.get('/',(req,res)=>{
//   res.send('1111')
// })
const http = require('http').createServer(app)
const io = require('socket.io')(http, { cors: true }) //创建了一个websocket服务器 并且解决了跨域
io.on('connection', (socket) => {
  // 客户端链接成功
  console.log('~connection~')
  // jack给rose发
  socket.on('handeljack',(e)=>{
    console.log('handeljack',e);
    io.emit('messageRose',e)
    })
  // rose给Jack发
  socket.on('handelrose',(e)=>{
    console.log('handelrose',e);
    io.emit('messageJack',e)
    })
})
// 客户端那边传过来的事件接收

http.listen(2000,'192.168.72.80',()=>{
  console.log('http://192.168.72.80:2000');
})

1.jack.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jack</title>
  <script src="https://cdn.socket.io/4.4.0/socket.io.min.js"></script>
</head>

<body>
  <ul></ul>
  <input type="text" name="" id="ipt" placeholder="请输入内容">
  <button id="btn">点击发消息给rose</button>
  <script>
    const btn = document.querySelector('#btn')
    const ipt = document.querySelector('#ipt')
    const box = document.querySelector('ul')
    /* 监听connect事件 */
    const socket = io('http://192.168.72.80:2000');
    socket.on('connect', () => {
      console.log('看到这里,表示和服务器连接上了')
    })
    const list = []
    socket.on('messageJack', (e) => {
      console.log(e);
      var str = ''
      list.push(e)
      list.forEach(item=>{
        str+=`<li>${item}</li>`
      })
      box.innerHTML=str
    })
    btn.onclick=function(){
      console.log(111);
      socket.emit('handeljack',ipt.value)
    }
  </script>
</body>

</html>

2.rose.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rose</title>
  <script src="https://cdn.socket.io/4.4.0/socket.io.min.js"></script>
</head>

<body>
  <ul>
    <li>1111</li>
  </ul>
  <input type="text" name="" id="ipt" placeholder="请输入内容">
  <button id="btn">点击发消息给Jack</button>
  <script>
    const btn = document.querySelector('#btn')
    const ipt = document.querySelector('#ipt')
    const box = document.querySelector('ul')
    /* 监听connect事件 */
    const socket = io('http://192.168.72.80:2000');
    socket.on('connect', () => {
      console.log('看到这里,表示和服务器连接上了')
    })
    const list = []
    socket.on('messageRose', (e) => {
      console.log(e);
      var str = ''
      list.push(e)
      list.forEach(item=>{
        str+=`<li>${item}</li>`
      })
      box.innerHTML=str
    })
    btn.onclick = function () {
      console.log(111);
      socket.emit('handelrose', ipt.value)
    }
  </script>
</body>

</html>

到了这里,关于Vue中如何利用websocket实现实时通讯的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【websocket】Node+Vue2+WebSocket实现前后端通讯

    WebSocket是一个长连接,客户端可以给服务端发送消息,服务端也可以给客户端发送消息,是 全双工通信。 平时的前后端分离项目,是前端请求结果获取后端服务器数据,从而渲染到页面,服务端无法主动向客户端发起消息,某些需求场景下,一旦客户端 需要知道服务端的频

    2024年02月02日
    浏览(42)
  • Vue3+springboot通过websocket实现实时通信

    本文章使用vue3+springboot通过websocket实现两个用户之间的实时通信,聊天信息使用mongodb非关系型数据库进行存储。 效果图如下: 用户发送信息  农户收到信息并发送回去 后台消息打印 引入依赖   配置 在config目录下, 创建WebSocketConfig类 创建一个WebSocketServer来 处理连接 用户

    2024年02月05日
    浏览(44)
  • websocket 实现后端主动前端推送数据、及时通讯(vue3 + springboot)

    WebSocket 是一种全双工通信协议,用于在 Web 浏览器和服务器之间建立持久的连接。 WebSocket 协议由 IETF 定为标准,WebSocket API 由 W3C 定为标准。 一旦 Web 客户端与服务器建立连接,之后的全部数据通信都通过这个连接进行。 可以互相发送 JSON、XML、HTML 或图片等任意格式的数据

    2024年03月17日
    浏览(50)
  • 客户端与服务端实时通讯(轮询、websocket、SSE)

    在某些项目中,某些数据需要展示最新的,实时的,这时候就需要和服务端进行长时间通讯 对于数据实时获取,我们一般会有4种方案: 1.短轮询:使用浏览器的定时器发起http请求,每隔一段时间就请求一次 2.长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连

    2024年02月08日
    浏览(46)
  • vue和node使用websocket实现数据推送,实时聊天

    需求:node做后端根据websocket,连接数据库,数据库的字段改变后,前端不用刷新页面也能更新到数据,前端也可以发送消息给后端,后端接受后把前端消息做处理再推送给前端展示 使用node ./app.js运行项目 在需要使用websocket连接的页面引入 默认如下: id为243 在数据库改为

    2024年02月15日
    浏览(46)
  • 基于vue+websocket实现web端的实时pcm音频播放

    pcm-player是一个JavaScript库,用于在浏览器中播放PCM音频文件。PCM是一种数字音频编码格式,它将模拟音频信号转换为数字信号。在Vue中使用PCMPlayer可以让你在Web应用中轻松处理音频播放。 安装pcm-player 在Vue组件中引入PCMPlayer 在你的Vue组件中,你需要引入PCMPlayer库。你可以在组

    2024年04月09日
    浏览(105)
  • Vue使用WebSocket实现实时获取后端推送的数据。

    Vue可以使用WebSocket实现实时获取后端推送的数据。 1.在Vue项目中安装WebSocket库 可以使用npm或yarn安装WebSocket库: 2.创建WebSocket连接 在Vue组件中创建WebSocket连接,连接到后端WebSocket服务器,代码如下: 上面的代码中,使用WebSocket连接到后端WebSocket服务器,通过监听onmessage事件,

    2024年02月08日
    浏览(47)
  • vue 利用科大讯飞实现实时语音转写

    1:新建js文件,该文件在科大讯飞api的demo种可以找到 2: 引入第一个文件在vue页面中 3:如果在引入的过程中有些关于worker的报错,可以参考以下方法  在vue.config.js中加入  

    2024年02月12日
    浏览(41)
  • websocket实时通讯和socket.io实时通信库的使用;心跳机制与断线重连

    https://zh.javascript.info/websocket WebSocket 是一种网络通信协议,就类似于 HTTP 也是一种通信协议。 为什么需要 WebSocket? 因为 HTTP 协议有一个缺陷:通信只能由客户端发起。 代码解析: 创建WebSocket实例:通过 new WebSocket() 创建一个WebSocket实例。在括号中传入服务器的URL,该URL指定了

    2024年02月16日
    浏览(41)
  • vue+JSMpeg+websocket实现海康、大华实时画面播放及回放查看

    JSMpeg是一个JavaScript编写的视频解码器,仅支持MPEG1视频、MP2音频解码、WebGLCanvas2D渲染、WebAduio音频输出。本项目使通过websocket加载低延迟的流媒体,采用的软解码。 这里就不做详细实现过程说明了 直接上效果图,有需要的可以私信我 支持3*3路视频播放,双击放大缩小,支持

    2024年02月07日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包