Vue2.x中如何简单实现socket.io连接及使用？

本文共计1078个文字，预计阅读时间需要5分钟。

目录+前言+服务端+客户端+使用介绍及流程+前言+首先来了解一下什么是socket.io：使用流程的Web应用程序程序堆栈（如LAMP（PHP））编写聊天应用程序通常非常困难。它涉及到轮询服务器以查找新消息，这可能导致性能问题。而socket.io则包括轮询服务器以查找新消息，简化了开发过程。它涉及轮询服务器以查找新消息。

目录

• 前言
• 服务端
• 客户端
• 使用介绍及流程

前言

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

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

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

服务端

新建好文件夹，打开终端输入：

npm init -y

初始好包之后下载好express，在官网有传统的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('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'的函数来接收，参数就是服务器给我们的数据，这里直接打印在控制台。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。