在vue2.x里面简单使用socketio问题

 更新时间:2022年10月09日 09:43:36   作者:The_more_more  
这篇文章主要介绍了在vue2.x里面简单使用socketio问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

前言

首先来了解一下什么是socketio:

  • 使用流行的Web应用程序堆栈(如LAMP(PHP))编写聊天应用程序通常非常困难。它涉及轮询服务器以查找更改,跟踪时间戳,并且它比应有的速度慢得多。
  • 传统上,套接字是构建大多数实时聊天系统的解决方案,在客户端和服务器之间提供双向通信通道。
  • 这意味着服务器可以将消息推送到客户端。每当您编写聊天消息时,其想法是服务器将获取它并将其推送到所有其他连接的客户端。

简单的来说就是一般的逻辑就是服务器响应客户端,而socketio基于webstorm实现了服务端推送到其他的客户端,不再处于被动的局面。

服务端

新建好文件夹,打开终端输入:

npm init -y

初始好包之后下载好express,在官网有传统的http,这里以express来演示:

npm i express@4.18.1

下载好socketio

npm i socket.io@4.5.1

编写好相应的代码:

const app = require('express')()
const server = require('http').Server(app)
const io = require('socket.io')(server, { cors: true })
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Origin,X-Requested-With,Accept,Content-type')
  res.header('Access-Control-Allow-Credentials', true)
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  res.header('Content-Type', 'application/json;charset=utf-8')
  if (req.method.toLowerCase() == 'options') res.sendStatus(200)
  else next()
})
server.listen(3030, () => {
  console.log('listening on http://localhost:3030')
})

这里写了一些跨域的配置,监听的端口号为3030,接着在下面书写下列代码:

io.on('connect', (socket) => {
  console.log('有人连接成功了')
  socket.on('my other event', function (data) {
    console.log(data)
    socket.emit('news', data)
  })
  socket.emit('open', {data:'恭喜你收到了信息'})
  // 监听客户端断开
  socket.on('disconnect', () => {
    console.log('客户端断开')
  })
})

connect监听是否有人连接,如果客户端有人连接了就会触发回调,socket就会收到一些所需的事件触发

客户端

在vue2.x里面我们同样要下载包:

npm i socket.io-client@3.1.0 vue-socket.io@3.0.10

在入口文件里面引入:

// socket.io
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(
  new VueSocketIO({
    debug: false,
    connection: SocketIO('http://127.0.0.1:3030', {
      autoConnect: false // 取消自动连接     
    }),
    extraHeaders: { 'Access-Control-Allow-Origin': '*' }
  })
)

这里的配置项有很多,可以去官网更好的了解,这里传入的网址也就是我们监听的端口

在一个干净的页面书写demo:

<template>
  <div class="wrap">
    <button @click="connected">连接Socket</button>
    <button @click="socketSendmsg">发送数据</button>
  </div>
</template>
<script>
export default {
  methods: {
    connected() {
      this.$socket.open() // 开始连接socket
    },
    socketSendmsg() {
      this.$socket.emit('my other event', { my: 'data' })
    }
  },
  sockets: {
    connecting() {
      console.log('正在连接')
    },
    disconnect() {
      console.log('Socket 断开')
    },
    connect_failed() {
      console.log('连接失败')
    },
    connect() {
      console.log('socket connected')
    },
    news(data) {
      console.log(data)
    },
    open(data) {
      console.log(data)
    }
  }
}
</script>

使用介绍及流程

使用:node app.js启动服务端,npm run serve启动客户端

页面会出现两个按钮,按下第一个就会开始连接,这时候服务器就会打印有人连接了,点击发送消息就会触发this.$socket.emit('my other event', { my: 'data' })第一个参数就是需要响应服务端的名称,第二个就是我们传递的数据,这时候服务端收到数据就会打印在终端:

socket.on('my other event', function (data) {
    console.log(data)
    socket.emit('news', data)
  })

这时候服务端触发 socket.emit('news', data)第一个参数就是给到客户端的名称,第二个就是上一个函数收到的结果,这里是原封不动返回出去,到了客户端里面再sockets这个对象里面就可以写上'new'的函数来接收,参数就是服务器给我们的数据,这里直接打印在控制台。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue项目如何实现切换主题色思路

    Vue项目如何实现切换主题色思路

    这篇文章主要介绍了Vue项目如何实现切换主题色思路,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 如何在vue-cli中使用css-loader实现css module

    如何在vue-cli中使用css-loader实现css module

    这篇文章主要介绍了如何在vue-cli中使用css-loader实现css module,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • vue3生成随机密码的示例代码

    vue3生成随机密码的示例代码

    本文主要介绍了vue3生成随机密码的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 公共Hooks封装报表导出useExportExcel实现详解

    公共Hooks封装报表导出useExportExcel实现详解

    这篇文章主要为大家介绍了公共Hooks封装报表导出useExportExcel实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 利用vue3自己实现计数功能组件封装实例

    利用vue3自己实现计数功能组件封装实例

    组件(Component) 是Vue.js最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于利用vue3自己实现计数功能组件封装的相关资料,需要的朋友可以参考下
    2021-09-09
  • vue.js—定义全局变量、函数的方式

    vue.js—定义全局变量、函数的方式

    这篇文章主要介绍了vue.js—定义全局变量、函数的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 通用vue组件化登录页面实例代码

    通用vue组件化登录页面实例代码

    这篇文章主要给大家介绍了关于通用vue组件化登录页面的相关资料,文中通过图文以及实例代码将解决的办法介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-08-08
  • 在vue框架下使用指令vue add element安装element报错问题

    在vue框架下使用指令vue add element安装element报错问题

    这篇文章主要介绍了在vue框架下使用指令vue add element安装element报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue实现移动端拖拽悬浮按钮

    vue实现移动端拖拽悬浮按钮

    这篇文章主要为大家详细介绍了vue实现移动端拖拽悬浮按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vue 运行高德地图官方样例,设置class无效的解决

    Vue 运行高德地图官方样例,设置class无效的解决

    这篇文章主要介绍了Vue 运行高德地图官方样例,设置class无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论