socket.io (uniapp)前端连接不上问题

时间:2021-1-8 作者:admin

记录: 2020/11/10

前言:

socket.io 版本问题会导致前端边连不上,目前这里使用”socket.io”: “^2.3.0″测试没有问题(当日 3.0.1 版本就不行,高版本有影响)

start:

基于uni-app+nodejs+socket.io打造一个实时通信的应用

  1. 这里只是记录到连接成功和能发送接收消息成功而已
  2. 其余的未记录。后面完成会做一个记录

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 服务器端代码(第一种)

  1. 整个 express 模块 去官方案例直接复制即可

  2. 给 socket.io 新开了一个端口

  3. 在使用 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 首页调用连接,并且发送一个消息和接收回来消息

  1. 一个输入框和一个发送按钮,输入内容,点击发送
  2. 后端拿到内容,再广播出去
  3. 前端再拿到值,把内容渲染到  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 服务器端代码(第二种)

  1. 在于一些语法或者思路的区别吧

  2. 需要时,哪种好用使用哪种

    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 首页调用连接,并且发送一个消息和接收回来消息

  1. 一个输入框和一个发送按钮,输入内容,点击发送
  2. 后端拿到内容,再广播出去
  3. 前端再拿到值,把内容渲染到 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>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。