记录： 2020/11/10
前言：
socket.io 版本问题会导致前端边连不上，目前这里使用”socket.io”: “^2.3.0″测试没有问题（当日 3.0.1 版本就不行，高版本有影响）
start:
基于uni-app+nodejs+socket.io打造一个实时通信的应用
- 这里只是记录到连接成功和能发送接收消息成功而已
- 其余的未记录。后面完成会做一个记录
1. 安装express和socket.io模块
npm install express npm install socket.io //版本为(socket.io 版本新的如当日： 3.0.1 => 就连接不上) "express": "^4.17.1","socket.io": "^2.3.0"
2.1 服务器端代码（第一种）
-
整个 express 模块 去官方案例直接复制即可
-
给 socket.io 新开了一个端口
-
在使用 io.on()…这个去 socket.io 官方文档中有各种使用，复制即可
const express = require(‘express’)const app = express()const port = 3000var server = app.listen(8082)// 2020/11/10 npm socket.io 是 3.0.1 下面 .listen 用了会报错// 但是去掉它之后，下面又进不来连接（下载的之前socket.io”: “^2.3.0）新的不知如何解决还var io = require(‘socket.io’).listen(server);//引入socket.js// require(‘./model/socket.js’)(io);io.on(‘connection’,(socket)=>{ // 1. 进来要连接成功（对应前端建立连接） console.log(‘socket 连接成功！’); // 2. 接收到前端发过来的消息（对应前端发送消息） socket.on(‘message’, data=>{ console.log(data) // 3. 接收到消息，就可以广播出去（对应前端接收消息） socket.broadcast.emit(‘sendMsg’,data); })})app.get(‘/’, (req, res) => res.send(‘Hello World!’))app.listen(port, () => console.log(
Example app listening on port ${port}!))
2.1 uniapp 客服端代码
1. main.js 全局引入，其他页面都可以调用
2. 192.168.0.104 这个ip为本地ip（如win10，笔记本wifi查看，左键点击右下角wifi，在点击属性，进去里面ipv4地址就是了）
3. 测试，开一个网页界面，再开一个手机或者模拟器，服务器要打开 node index ，两边即能最简单的即时通讯了
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.104:8082')
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
2. index.vue 首页调用连接，并且发送一个消息和接收回来消息
- 一个输入框和一个发送按钮，输入内容，点击发送
- 后端拿到内容，再广播出去
- 前端再拿到值，把内容渲染到 view box 上
<template>
<view class="content">
<view class="main">
<view class="" v-for="(e,index) in arr" :key="index">
{{e}}
</view>
</view>
<view class="foot">
<view class="" @tap="jump">
chat
</view>
<input type="text" v-model="msg" class="input" />
<button type="default" @tap="send">发送</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
msg: '',
arr: []
}
},
onLoad() {
this.getMsg()
},
methods: {
jump(){
uni.navigateTo({
url: '../chat/chat'
})
},
send(){
this.arr.push(this.msg)
// 发送消息
this.socket.emit('message', this.msg)
this.msg = ''
},
// 接收消息
getMsg(){
this.socket.on('sendMsg', data => {
console.log(data)
this.arr.push(data)
})
}
}
}
</script>
<style scoped lang="scss">
.content {
padding: 40rpx;
}
.foot{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
input{
width: 100%;
height: 90rpx;
background-color: #eee;
}
}
</style>
2.1 服务器端代码（第二种）
-
在于一些语法或者思路的区别吧
-
需要时，哪种好用使用哪种
const express = require(“express”);const app = express();const http = require(“http”).createServer(app);const io = require(“socket.io”)(http);io.on(“connection”, socket => { // 客户端链接成功 // 1. 进来要连接成功（对应前端建立连接） console.log(‘socket 连接成功！’); // 2. 接收到前端发过来的消息（对应前端发送消息） socket.on(‘message’, data=>{ console.log(data) // 3. 接收到消息，就可以广播出去（对应前端接收消息） socket.broadcast.emit(‘sendMsg’,data); })});http.listen(3001, () => { console.log(“server running on 3001”);});
2.1 uniapp 客服端代码
只是端口号不一样，其他内容 uniapp 前端代码都是一样的
1. main.js 全局引入，其他页面都可以调用
2. 192.168.0.104 这个ip为本地ip（如win10，笔记本wifi查看，左键点击右下角wifi，在点击属性，进去里面ipv4地址就是了）
3. 测试，开一个网页界面，再开一个手机或者模拟器，服务器要打开 node index ，两边即能最简单的即时通讯了
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.104:3001')
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
2. index.vue 首页调用连接，并且发送一个消息和接收回来消息
- 一个输入框和一个发送按钮，输入内容，点击发送
- 后端拿到内容，再广播出去
- 前端再拿到值，把内容渲染到 view box 上
<template>
<view class="content">
<view class="main">
<view class="" v-for="(e,index) in arr" :key="index">
{{e}}
</view>
</view>
<view class="foot">
<view class="" @tap="jump">
chat
</view>
<input type="text" v-model="msg" class="input" />
<button type="default" @tap="send">发送</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
msg: '',
arr: []
}
},
onLoad() {
this.getMsg()
},
methods: {
jump(){
uni.navigateTo({
url: '../chat/chat'
})
},
send(){
this.arr.push(this.msg)
// 发送消息
this.socket.emit('message', this.msg)
this.msg = ''
},
// 接收消息
getMsg(){
this.socket.on('sendMsg', data => {
console.log(data)
this.arr.push(data)
})
}
}
}
</script>
<style scoped lang="scss">
.content {
padding: 40rpx;
}
.foot{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
input{
width: 100%;
height: 90rpx;
background-color: #eee;
}
}
</style>
点击咨询 