• 在vue2.x里面简单使用socketio


    在vue2.x里面简单使用socketio

    前言

    首先来了解一下什么是socketio

    使用流行的Web应用程序堆栈(如LAMP(PHP))编写聊天应用程序通常非常困难。它涉及轮询服务器以查找更改,跟踪时间戳,并且它比应有的速度慢得多。

    传统上,套接字是构建大多数实时聊天系统的解决方案,在客户端和服务器之间提供双向通信通道。

    这意味着服务器可以将消息推送到客户端。每当您编写聊天消息时,其想法是服务器将获取它并将其推送到所有其他连接的客户端。

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

    服务端

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

    npm init -y
    
    • 1

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

    npm i express@4.18.1
    
    • 1

    下载好socketio

    npm i socket.io@4.5.1
    
    • 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')
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    这里写了一些跨域的配置,监听的端口号为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('客户端断开')
      })
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

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

    客户端

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

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

    在入口文件里面引入:

    // 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': '*' }
      })
    )
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

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

    在一个干净的页面书写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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    使用介绍及流程

    使用: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)
      })
    
    • 1
    • 2
    • 3
    • 4

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

  • 相关阅读:
    singleflight 防止缓存击穿、并发结果共享(golang官方包和go-zero实现对比)
    c++编程(18)——deque的模拟实现(2)容器篇
    白话谈区块链和其应用场景
    Python如何采集关键词数据
    简述JDK,JRE,JVM的关系
    基于STM32设计的酒驾报警系统
    Vue项目实战之人力资源平台系统(三)主页模块
    24点问题(带输出构造方式)
    神器 SpringDoc 横空出世!最适合 SpringBoot 的API文档工具来了
    【网络安全 --- xss-labs靶场】xss-labs靶场安装详细教程,让你巩固对xss漏洞的理解及绕过技巧和方法(提供资源)
  • 原文地址:https://blog.csdn.net/The_more_more/article/details/126060873