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