socket io与vue-cli的结合使用的示例代码

Vue与Socket IO的完美融合：实时通信的简易实现

在现代网络应用中，实时通信变得至关重要。本文将向您展示如何使用Vue CLI与Socket IO结合，创建一个简单的实时通信应用。长沙网络推广推荐此方案，现在分享给大家，作为参考与学习的材料。

一、准备工作

确保您的系统已经安装了Node.js和npm。然后，使用Vue CLI创建一个新的Vue项目。

二、安装依赖

在项目根目录下，运行以下命令安装所需的依赖：

```bash

npm install socket.io vue-socket.io socket.io-client

```

三、创建Socket服务器

在项目的最外层，创建一个`server`文件夹，并在其中创建一个`app.js`文件。在该文件中，我们将设置Socket服务器。

```javascript

const http = require('http').createServer();

const io = require('socket.io')(http);

io.on('connection', function (socket) {

socket.on('login', function(data) {

console.log(data); // 打印接收到的数据

io.emit('loginmsg', '你发过来的数据是' + data); // 将数据发送回客户端

});

});

http.listen(8000, () => {

console.log('Socket服务器在8000端口启动');

});

```

四、配置启动脚本

在项目的`package.json`文件中，添加启动服务器的脚本。找到"scripts"字段，添加以下内容：

```json

"scripts": {

"server": "node server/app.js"

}

```

五、配置Vue项目

在Vue项目的`main.js`文件中，使用`VueSocketio`插件与Socket服务器建立连接。

```javascript

import VueSocketIO from 'vue-socket.io';

import socketio from 'socket.io-client';

Vue.use(VueSocketIO, socketio('ws://127.0.0.1:8000')); // 与Socket服务器建立连接

```

六、创建Vue组件

在Vue组件中，我们可以使用`sockets`字段来监听来自服务器的消息，并使用`$socket.emit`方法发送消息。以下是一个简单的示例组件：

```vue