Vue+express+Socket实现聊天功能

本文实例为大家分享了Vue+express+Socket实现聊天功能的具体代码,供大家参考,具体内容如下

实现聊天功能

具体功能

只是为了实现功能,不对界面进行美化

1、输入消息点击发送所有用户可以在下方收到消息

2、输入userid后点击连接,可以连接对应的聊天,另外一个界面输入刚刚那个页面的userid后再输入内容点击发送给指定的人,则刚才那个页面可以打印输出,而其他页面不会收到,实现私聊的功能

3、没有具体实现私聊的内容显示,但是接收发送消息都可以实现,要实现私聊的内容显示可以再添加一个私聊页面

界面截图

项目准备

只对socket准备进行介绍,Vue和express的搭建不进行介绍

前端 socket

安装

npm i vue-socket.io --save

导入

import VueSocketIO from 'vue-socket.io'

后台socket

安装

npm i socket.io --save

导入

在express-generator生产的bin/www文件夹中加入

var io = require('socket.io')(server)'
io.on('connection',  (socket) => {
  socket.on('demining',  (data) => {
    console.log(data);
  });
});

具体截图如下:

项目实现

Vue代码

HTMl代码

<div class="home">
    userid: <input type="text" v-model="userid">
    昵称:<input type="text" v-model="name">
    消息:<input type="text" v-model="msg" />
    <button @click="send">发送</button>
    <button @click="join">连接</button>
    <button @click="sendmsg">发送给指定的人</button>

    <ul>
      <li v-for="(item,index) in chatList" :key="item.name + index">
        {{ item.name }}说:{{ item.msg }}
      </li>
    </ul>
</div>

js代码

export default {
  name: "Home",
  data() {
    return {
      users: [],
      msg: "",
      chatList: [],
      name: '',
      userid: ''
    };
  },
  sockets: {
    // 连接后台socket
    connect() {
      console.log('socket connected');
    },
    // 用户后台调用,添加数据
    sendMessage(data) {
      console.log(data);
      this.chatList.push(data)
    },
    // 用户后台调用,打印数据
    receivemsg(data) {
      console.log('receivemsg');
      console.log(data);
    }
  },
  methods: {
    // 发送消息给后台
    send() {
      // 使用emit调用后台的socket中的message方法
      this.$socket.emit("message", {
        userid: 100,
        name: this.name,
        msg: this.msg
      });
    },
    // 建立用户连接
    join() {
      this.$socket.emit("join", {
        userid: this.userid
      });
    },
    // 发送消息给后台 用于私发消息
    sendmsg() {
      this.$socket.emit("sendmsg", {
        userid: this.userid,
        msg: this.msg
      });
    }
  }
};

express代码

在刚才的www文件定义的连接中添加一下代码

// 用于存储每个用户的socket,实现私聊的功能
let arrAllSocket = {}
// 穿件socket连接
io.on('connection', (socket) => {
  console.log('连接上了');
  // console.log(socket);
  // join函数 用于用户连接
  socket.on('join', function (obj) {
    console.log(obj.userid + 'join')
    // 保存每个用户的连接状态 用于私发消息
    arrAllSocket[obj.userid] = socket
  })
  // 接收前台发送的消息 函数名为message
  socket.on('message', (data) => {
    console.log(data);
    // 将消息发送回前台(调用前台定义的方法) 函数名为sendMessage
    io.emit('sendMessage', data);
  });
  // 私发消息
  socket.on('sendmsg', function (data) {
    console.log(data);
    // 查询用户连接
    let target = arrAllSocket[data.userid]
    if (target) {
      //发送信息至指定的人
      target.emit('receivemsg', data)
    }
  })
})

后台代码封装

由于www文件不应该写太多代码,所以对这一部分代码进行封装

1、在项目目录下创建一个io的文件夹,结构如下

2、将刚才的那部分代码移入io/index.js中

代码如下

// 将server作为参数传入
module.exports = function (server) {
  var io = require('socket.io')(server);
// 用于存储每个用户的socket,实现私聊的功能
  let arrAllSocket = {}
// 穿件socket连接
  io.on('connection', (socket) => {
    console.log('连接上了');
    // console.log(socket);
    // join函数 用于用户连接
    socket.on('join', function (obj) {
      console.log(obj.userid + 'join')
      // 保存每个用户的连接状态 用于私发消息
      arrAllSocket[obj.userid] = socket
    })
    // 接收前台发送的消息 函数名为message
    socket.on('message', (data) => {
      console.log(data);
      // 将消息发送回前台(调用前台定义的方法) 函数名为sendMessage
      io.emit('sendMessage', data);
    });
    // 私发消息
    socket.on('sendmsg', function (data) {
      console.log(data);
      // 查询用户连接
      let target = arrAllSocket[data.userid]
      if (target) {
        //发送信息至指定的人
        target.emit('receivemsg', data)
      }
    })
  })
}

最后在www文件中使用如下代码,引入文件

var io = require('../io')
io(server)

至此,聊天的基本功能实现。记录一下方便以后使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue.js仿微信聊天窗口展示组件功能

    源码:https://github.com/doterlin/vue-wxChat 演示地址:https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 介绍 支持文本和图片的展示(后续将

  • vue + socket.io实现一个简易聊天室示例代码

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位道友指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服

  • Vue Cli 3项目使用融云IM实现聊天功能的方法

    介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程:sdk使用介绍 过一遍教程,接下来开始写 二.引入融云IM 如图: 位置:public/index.html,引入 <script src="https://cdn.ronghub.com/RongIMLib-2.3.5.min.js"></script> 三.可以正常使用

  • 基于vue和websocket的多人在线聊天室

    最近看到一些关于websocket的东西,就决定写一个在线聊天室尝试一下.最终决定配合vue来写,采用了官方的vue脚手架vue-cli和官方的router,在本例中呢,我是用了CHAT这个对象来存储app的数据的,但后来一想,虽然项目很小,但如果用官方的vuex会更好,方便以后扩展,比如可以加上私信功能,可以在对方不在线的时候缓存发送的消息,这些都是可以的.(现在比较尴尬的就是,我把聊天室写好放到公众号号redream里,但是很少有人会同时在线,所以你会经常发现你进去的时候只有你一个人,就导致

  • vue实现web在线聊天功能

    本文实例为大家分享了vue实现web在线聊天的具体代码,供大家参考,具体内容如下 最终实现的效果 实现过程 无限滚动窗体的实现之前已经介绍过,这里就不在赘述了,不清楚的可以通过文档前文的传送门进行查看. 实时在线聊天主要功能点 滚动到两天窗体顶部,自动加载历史跟多信息,数据加载的时候,需要有一个loading动画: 发送信息是滚动条自动滑动到窗体底部,并且自己发送的信息出现在聊天窗体中: 收到别人发送信息时,需要判断滚动条处于窗体中的位置,在距离底部一定范围内收到信息需要自动滑动到窗体底部: 收

  • Vue实现聊天界面

    本文实例为大家分享了Vue实现聊天界面展示的具体代码,供大家参考,具体内容如下 1.功能需求 根据索引选择跟不同的人进行聊天 2.代码展示 mock.js: import Mock from 'mockjs' Mock.mock("/chatchild",{ 'result':[ { id:"001", imgurl:"/static/image/10.jpg", name:"XKDK", date:"09:23&q

  • vue实现的微信机器人聊天功能案例【附源码下载】

    本文实例讲述了vue实现的微信机器人聊天功能.分享给大家供大家参考,具体如下: 先看效果: 实现过程: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5模拟微信聊天界面</title> <style> /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; fo

  • 基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    概述 使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com/jiangqizheng/vue-MiniQQ 项目已实现功能 对话功能--想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话. 左滑删除--左滑删除相关消息. 搜索页面--点击右上角搜索按钮,能够进入

  • vue+web端仿微信网页版聊天室功能

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室--vueWebChat,实现了发送消息.表情(动图),图片.视频预览,右键菜单.截屏.截图可直接粘贴至文本框进行发送. 二.技术框架 •MVVM框架:Vue2.5.6 •状态管理:Vuex •页面路由:Vue-router •iconfont图标:阿里巴巴字体图标库 •自定义滚动条:vue-gemi

  • Vue+ssh框架实现在线聊天

    本文实例为大家分享了Vue+ssh框架实现在线聊天的具体代码,供大家参考,具体内容如下 效果图 核心部分 websocket编程 向后台发送消息 <template> <el-container> <el-header > </el-header> <el-main> <div class="cht"> <div v-for="(d,index) in mycontent" :key=&q

随机推荐