记录: 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>