Record: 2020/11/10

Preface:

IO: “^2.3.0” : no problem (3.0.1 version of the day does not work, higher version is affected)

start:

A real-time communication application based on UNI-app + NodeJS +socket. IO

  1. This is just a record of a successful connection and the ability to send and receive messages
  2. The rest were not recorded. A note will be made after the completion

1. Install the Express and socket. IO modules

"Express ": "^4.17.1","socket. IO ": "^ 2.3.0." "Copy the code

2.1 Server-side Code (Type 1)

  1. The entire Express module can be copied directly to the official case

  2. A new port was opened for socket. IO

  3. In the use of IO. On ()… The socket. IO official documentation has various uses, can be copied

    const express = require(‘express’)const app = express()const port = 3000var server = app.listen(8082)// 2020/11/10 npm Socket. IO: 3.0.1 socket. IO: 3.0.1 socket. “^2.3.0) var IO = require(‘socket.io’).listen(server); // require(‘./model/socket.js’)(IO); io.on(‘connection’,(socket)=>{ // 1. Console. log(‘ Socket connected successfully! ‘); Socket. On (‘message’, data=>{console.log(data) // 3. Emit (‘sendMsg’,data); 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 customer service code

1. Main.js is introduced globally and can be called from any other page

2. 192.168.0.104 this IP is local IP (such as WIN10, laptop wifi view, left click on the bottom right wifi, click on the properties, into the inside ipv4 address is)

3. Test, open a web interface, then open a mobile phone or emulator, the server should open Node Index, both sides can be the simplest instant communication

import Vue from 'vue' import App from './App' import io from './common/weapp.socket.io.js' Vue.config.productionTip = False Vue. Prototype. The socket = IO (' http://192.168.0.104:8082 ') App. MpType = 'App' const App = new Vue ({... App }) app.$mount()Copy the code

Vue home page calls the connection and sends a message and receives a message back

  1. An input box and a send button, enter the content, click send
  2. The back end takes the content and broadcasts it out
  3. The front end takes the value and renders the content to the 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> </template> <script> export default { data() { return { msg: '', arr: [] } }, onLoad() { this.getMsg() }, methods: { jump(){ uni.navigateTo({ url: '.. /chat/chat'})}, send(){this.arr.push(this.msg) // send 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>Copy the code

2.1 Server-side Code (Type 2)

  1. Some differences in grammar or ideas

  2. Use whatever works when you need it

    const express = require(“express”); const app = express(); const http = require(“http”).createServer(app); const io = require(“socket.io”)(http); IO. On (“connection”, socket => {// Client connected successfully // 1. Console. log(‘ Socket connected successfully! ‘); Socket. On (‘message’, data=>{console.log(data) // 3. Emit (‘sendMsg’,data); socket.broadcast.emit(‘sendMsg’,data); })}); http.listen(3001, () => { console.log(“server running on 3001”); });

2.1 UniAPP customer service code

Only the port number is not the same, the other content uniAPP front-end code is the same

1. Main.js is introduced globally and can be called from any other page

2. 192.168.0.104 this IP is local IP (such as WIN10, laptop wifi view, left click on the bottom right wifi, click on the properties, into the inside ipv4 address is)

3. Test, open a web interface, then open a mobile phone or emulator, the server should open Node Index, both sides can be the simplest instant communication

import Vue from 'vue' import App from './App' import io from './common/weapp.socket.io.js' Vue.config.productionTip = False Vue. Prototype. The socket = IO (' http://192.168.0.104:3001 ') App. MpType = 'App' const App = new Vue ({... App }) app.$mount()Copy the code

Vue home page calls the connection and sends a message and receives a message back

  1. An input box and a send button, enter the content, click send
  2. The back end takes the content and broadcasts it out
  3. The front end takes the value and renders the content to the 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> </template> <script> export default { data() { return { msg: '', arr: [] } }, onLoad() { this.getMsg() }, methods: { jump(){ uni.navigateTo({ url: '.. /chat/chat'})}, send(){this.arr.push(this.msg) // send 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>Copy the code