这次来讲一下如何用socket+node来搭建一个即时聊天的聊天室功能实现。

实现逻辑

接下来就直奔主题，走起！

一、创建项目（本次项目使用uni-app）

基础项目.png

二、在index.vue中做好聊天框页面

<template>
    <view class="content">
        <view class="main">
            <view v-for="e in arr">{{ e }}</view>
        </view>
        <view class="foot">
            <input type="text" class="cont" v-model="cont" style="background-color: #F1F1F1" />
            <button @tap="send">提交</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            cont: '',
            arr: ['sdsadad', 'asddas', 'adsdas']
        };
    },
    onLoad() {},
    methods: {
        send() {
            this.arr.push(this.cont)
        }
    }
};
</script>

<style>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.title {
    font-size: 36rpx;
    color: #8f8f94;
}
.foot {
    position: fixed;
    bottom: 0;
    width: 100%;
    .cont {
        width: 100%;
        height: 60rpx;
    }
}
</style>

前端.png

至此前端代码就完工了，现在我们开始搭建后端代码

三、后端文件部署

创建一个sockets文件夹

image.png

安装socket.io

image.png

这样就ok了，现在把文件拉进编辑器。自己新建两个文件。

image.png

四、引入express

cmd中安装express

cnpm install express --save

express.png

在index.js中写

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

运行代码

image.png

进入localhost:3000可见：

image.png

const express = require('express')
const app = express()
const port = 3000

var server = app.listen(8082)
var io = require('socket.io').listen(server);

io.on('connection', (socket) => {
  console.log('socket 连接成功');
});

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

后端成功部署

五、回到前端文件连接后端

前端文件安装socket.io
先把依赖安装到sockets里

两种方法

image.png

在后端文件中找到

weapp.socket.js

• 在前端中新建common文件夹并把该文件导入
• 在main.js中引入io

import Vue from 'vue'
import App from './App'
import io from './common/weapp.socket.io.js'

Vue.config.productionTip = false
Vue.prototype.socket = io('http://192.168.0.105:8082')
App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

• 运行项目可看到

  
  
  image.png

前后端连接成功！

六、编辑客户端发送函数

• 在index.vue（前端）中编辑（客户端）

    methods: {
        send() {
            if (this.cont.length > 0) {
                this.arr.push(this.cont)
                //发送
                let aa = this.cont
                this.socket.emit('message',aa)
            }
        }
    }

• 在index.js (后端) 中编辑 （服务端）

const express = require('express')
const app = express()
const port = 3000

var server = app.listen(8082)
var io = require('socket.io').listen(server);

io.on('connection', (socket) => {
    console.log('socket 连接成功');
    //接收信息
    socket.on('message', data => {
        console.log(data);
    })
});

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

可见：

image.png

已能接收到信息，现在将信息传回给客户端：

• 服务端广播
  在index.js(后端)进行广播：

io.on('connection', (socket) => {
    console.log('socket 连接成功');
    //接收信息
    socket.on('message', data => {
        // console.log(data);
        
        //广播消息
        socket.broadcast.emit('gbmsg',data);
    })
});

• 客户端接收
  index.vue中写:

    onLoad() {
        this.getmsg();
    },
    methods: {
        send() {
            if (this.cont.length > 0) {
                this.arr.push(this.cont);
                //发送
                let aa = this.cont;
                this.socket.emit('message', aa);
            }
        },
        getmsg() {
            this.socket.on('gbmsg', data => {
                this.arr.push(data);
            });
        }
    }

七、测试是否成功

我本人用谷歌和手机浏览器同步打开了2个客户端

• 谷歌

  
  
  image.png

• 手机

image.png

就这么神奇！下次将点对点聊天的实现。