這次來講一下如何用socket+node來搭建一個(gè)即時(shí)聊天的聊天室功能實(shí)現(xiàn)。
實(shí)現(xiàn)邏輯
接下來就直奔主題蚂维，走起癌刽！
一、創(chuàng)建項(xiàng)目（本次項(xiàng)目使用uni-app）
基礎(chǔ)項(xiàng)目.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
至此前端代碼就完工了室抽，現(xiàn)在我們開始搭建后端代碼
三、后端文件部署
創(chuàng)建一個(gè)sockets文件夾
image.png
安裝socket.io
image.png
這樣就ok了靡努，現(xiàn)在把文件拉進(jìn)編輯器坪圾。自己新建兩個(gè)文件。
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}!`))
運(yùn)行代碼
image.png
進(jìn)入localhost:3000可見：
image.png
再把socket.io的代碼加入index.js(代碼可在socket.io官網(wǎng)上找到)
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文件夾并把該文件導(dǎo)入
- 在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()
-
運(yùn)行項(xiàng)目可看到
image.png
前后端連接成功！
六漾月、編輯客戶端發(fā)送函數(shù)
- 在index.vue（前端）中編輯（客戶端）
methods: {
send() {
if (this.cont.length > 0) {
this.arr.push(this.cont)
//發(fā)送
let aa = this.cont
this.socket.emit('message',aa)
}
}
}
- 在index.js (后端) 中編輯 （服務(wù)端）
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
已能接收到信息病梢，現(xiàn)在將信息傳回給客戶端：
- 服務(wù)端廣播
在index.js(后端)進(jìn)行廣播：
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);
//發(fā)送
let aa = this.cont;
this.socket.emit('message', aa);
}
},
getmsg() {
this.socket.on('gbmsg', data => {
this.arr.push(data);
});
}
}
七、測(cè)試是否成功
我本人用谷歌和手機(jī)瀏覽器同步打開了2個(gè)客戶端
-
谷歌
image.png
- 手機(jī)
image.png
就這么神奇梁肿！下次將點(diǎn)對(duì)點(diǎn)聊天的實(shí)現(xiàn)蜓陌。
