标签：node vue const socket 消息 io message data

首先是先把先把包安装好

vue里面安装　

npm i vue-socket.io socket.io-client

node里面安装

 npm i socket.io express  

随后先开始部署后端

node里面先导入所要用的模块　

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const app = express();
const server = http.createServer(app);

const io = socketIO(server, {//可能会出现的跨域问题
    cors: {
        origin: '*'
    }
});

 

然后先写好作为客户端连接之后,接受到客户端发送过来的消息的对应方法,同时向所有客户端进行广播

io.on("connection", (socket) => {//连接socket服务
    console.log("接入socket服务");
    socket.on("message", data => {
        console.log("接收到发送的消息:" + data);
        socket.broadcast.emit("broadcastMessages", { style: 1, msg: data[0], msg_time: data[1],username:data[2] })//广播发送信息[为系统信息，消息内容，时间，用户名字]
    })
})
server.listen(3000, () => { console.log("连接到socket服务器,端口为3000"); })

 然后部署前端

熟悉的在main.js里面导入包然后进行对应的设置

import SocketIO from 'socket.io-client';
import vueSocketio from 'vue-socket.io';
Vue.use(new vueSocketio({

  debug: true,

  connection: SocketIO('http://localhost:3000'),

}))

再相应的新建好一个页面,然后绑定一下要发的消息,和一个聊天记录列表

  data() {
    return {
      message: "",
      msgList: [],
    };
  },

连接服务器

mounted() {
    this.$socket.emit("connection", 1); //触发socket连接
  },

发送消息

  methods: {
    sendMessage() {
      //发送信息
      if (this.message.trim()) {
        //判断信息是否为空
        let message = this.message;
        let now_time = getTime(); //获取发送消息的时间，这是我自己写的一个方法
        this.pushMessages({
          //加入信息列表
          style: 0,
          msg: message,
          msg_time: now_time,
          username: this.$route.query.name, //传过来的名字
        });
        this.message = "";
        //向后台发送要发送的消息
        this.$socket.emit("message", [
          //消息，时间，名字
          message,
          now_time,
          this.$route.query.name,//这个是用户名字
        ]);
      }
    },
    //消息加入消息记录的方法
    pushMessages(data) {
      console.log(data);
      this.msgList.push(data);
    },
  },

然后在mounted和methods这些的同级下,这是接受到的服务器传过来的广播消息

  sockets: {
    //接受到的用户发送的广播消息
    broadcastMessages(data) {
      this.pushMessages(data);
    },
  },

这样就完成了最基础的通信了，然后打开两个浏览器测试一下

可以看到已经可以通信了,这就是最基础的即时聊天系统了

标签：node,vue,const,socket,消息,io,message,data
来源： https://www.cnblogs.com/Action-shadow/p/16651738.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。