首页 > 编程语言 >vue加node,使用socket.io模块完成即使通信系统(一)

vue加node,使用socket.io模块完成即使通信系统(一)

时间:2022-09-03 00:01:49浏览次数:70  
标签: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
From: https://www.cnblogs.com/Action-shadow/p/16651738.html

相关文章

  • Vue的列表超链接(A标签)是什么?如何实现跳转呢?
    方法一:通过<router-link:to="">我要跳转,别拦我</router-link>首页列表:在这里我用a标签进行跳转,在vue里面使用<router-link></router-link>  //注意:这里的router-lin......
  • vue——创建vue3
    一.使用vue-cli创建官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create 二.使用vite创建官方文档:https://v3.cn.vuejs.org/guide/installa......
  • [Node.js] Setup a Node.js CLI
    CreatingaCLIinNode.jsjusttakesaextrasteportwobecausetheyarereallyjustanordinaryNode.jsappwrappedbehindabincommand.Forthisexercise,......
  • node31-gulp使用
     第一步安装 第二步建立文件夹 第三部src放源代码 第四步输入代码 执行 ......
  • node32-gulp插件
     第一步下载 第二步constgulp=require('gulp');consthtmlmin=require('gulp-htmlmin');gulp.task('first',()=>{console.log('第一次执行');......
  • node32-综合案例图书管理9
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>......
  • node34-node.js得异步api
     constfs=require('fs');fs.readFile('./1.txt','utf8',(err,result1)=>{console.log(result1);fs.readFile('./2.txt','utf8',(err,result2)......
  • node35-promise
     constfs=require('fs');letpromise=newPromise((resolve,reject)=>{fs.readFile('./1.txt','utf8',(err,result)=>{if(err!=null)......
  • node36-node.js得异步api
    constfs=require('fs');fs.readFile('./1.txt','utf8',(err,result1)=>{console.log(result1);fs.readFile('./2.txt','utf8',(err,result2)=>......
  • node37-promise链式编程
    constfs=require('fs');/*fs.readFile('./1.txt','utf8',(err,result1)=>{console.log(result1);fs.readFile('./2.txt','utf8',(err,result2)=......