vue+node .js+socket io+chat rápido uno a uno.
npm instala sockets. io
Primero: lado del servidor node.js.
Basado en node.js y express
const express = require('express')
const app = express()
const query=require(./MySQL/connect')
const port = 2000
const PDD URL ='http://192.168.1.178'
servidor var = requerir('http'). Servidor (aplicación);
var io = require ('socket . io') (servidor
const body parser = require ('body-parser'); >
uso de la aplicación (body parser . urlencoded ({
Extensión: true
}));
//Establecer acceso entre dominios
p>app . all ("*"), function (req, res, next) {
//Establezca el nombre de dominio que permita dominios cruzados, * significa que cualquier dominio El nombre puede cruzar dominios.
RES.header("Access-Control-Allow-Origin", "*");
//Tipos de encabezado permitidos
RES.header (' Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, yourheaderfeld'
//Métodos de solicitud permitidos entre dominios
Encabezado RES . ("Acceso-Control-Permitir-Métodos", "BORRAR, PUBLICAR, PUBLICAR, OBTENER, OPCIONES");
if (req. método. tolowercase () = ='); options')
RES.send(200); //Deja que la opción de prueba finalice rápidamente.
Otro
siguiente();
})
app.get('/', function(req, RES) {
RES.send(<h1》Hola programa de Internet
});
/*Go*/
let arrall socket = [];
io.on('Conectar', función(socket){
/* * * * * * * *Unirse al chat* * * * * * * * * * * *
//Modelo de objeto
/*
obj={
Nombre de usuario: este .xvalue,
? ID de usuario: "fs",
? Contraseña: "contraseña"
*/
socket on ('unirse', función (. obj) {
consola . log (obj . userid+'join')
arrall socket [obj . userid]= socket
})
/********************************* ***/
/* * * * *Recibir un mensaje de alguien* * * * * * * *
socket.on('sendmsg', function(data) {
console.log (data)
let target = arrall socket【data . userid】
let res = {
Código: 200,
mensaje:data.username ,
self: true,
}
if (destino) {
//Enviar el mensaje a la persona especificada
objetivo .emitir ('recibir mensaje', res)
consola log (RES)
}
});
/* * * * * * * * * *Monitorear salidas de usuario* * * * * * * * * *
socket on ('desconectar ta', función (datos) {
let res = {
Código:200,
Msg:`$ {data.userid}ha salido de la sala de chat`,
self: true,
}
io.emit('logout',res);
console log (datos . ID de usuario + 'Salir de la sala de chat ');
});
});
servidor (puerto, () = & gtconsole.log (`Puerto de escucha de aplicación de ejemplo $. {pddUrl}:${port} `))
Paso dos: Primera página: Cliente
1. Instalar dependencias
npm install vue-socket.io - guardar
2. Introducir en main.js
Desde "vue- socket.io" importar VueSocketIO
Vue.use(nuevo vue socket io ({
debug: true,
conexión: "xx", // Esta es la ruta, por ejemplo: http://192.168.1.178.
vuex: {},
}))
3. En la página
& lttemplate>
& ltdiv & gt
& ltdiv & gt
& ltp & gtVentana de chat
& ltdiv id="contenido de chat"& gt.
& lt/div & gt;
& lt/div & gt
& ltdiv & gt
& ltIntroduzca v - modelo="valorx"/& gt.
& ltbutton@click="getva bk">Enviar
& ltbutton@click="Getbackvabk">Exportar
</div & gt;
& lt/div & gt;
& lt/template & gt;
& ltscript>
exportar predeterminado {
nombre: "mi-personal-zxlx",
datos() {
retorno {
fslista: 【】,
jsLista:【】,
valor x: '',
}
},
Creado(){
},
Instalado(){
//Envía información al servidor.
Esto. $ socket.emit('join', {
Nombre de usuario: this.xvalue,
ID de usuario: "fs", //Esta es tu identificación.
Contraseña: "contraseña"
});
},
Socket: {
Connect(){
? //Únete al chat
Este. $socket.emit('join', {
nombre de usuario: this.xvalue,
id de usuario: "fs", //Esta es la identificación de la persona con la que deseas chatear
Contraseña: "contraseña"
});
},
receivemsg(data){? // Escuche el evento de recepción de mensajes, el método lo define y proporciona el fondo.
console.log(datos);
this.cs(datos);
},
Cerrar sesión (datos) {? // Escuche el evento de cierre de sesión, el método lo define y proporciona el fondo.
console.log(datos);
this.cs(datos);
},
},
Método:{
getbackvabk(){
Esto. $ socket.emit('desconectar ta', {
Nombre de usuario: this.xvalue,
id de usuario: "fs",
Contraseña: "contraseña"
});
},
getva bk(){
//Enviar información al servidor.
Esto.
$ socket.emit('sendmsg', {
Nombre de usuario: this.xvalue,
id de usuario: "js",
Contraseña: "contraseña"< / p>
});
},
Secretario Jefe de Administración (Datos)
let chat content = document . )
let newMsg = document . createelement('div')
let msg content = document . createelement('span')
newmsg . contenido)
msgContent.innerText = data.msg
newmsg . lista de clases add('self-msg')
contenido de chat .
}
}
}
& lt/script & gt;
& lt rango de estilos & gt
& lt/style & gt;
Paso 3: Página B-Puerto de atención al cliente
& lttemplate& gt
& ltdiv & gt
cesio
& ltdiv & gt
& ltp & gtchat ventana
& ltdiv id="contenido de chat">.
& lt/div & gt;
& lt/div & gt
& ltdiv & gt
& ltIntroduzca v - modelo="valorx"/& gt.
& ltbutton@click="getva bk">Enviar
& lt/div>
& lt/div>
& lt/div>
p>
</template>
<script>
Exportar valor predeterminado {
Nombre: "cs ",
p>datos(){
return {
valorx:““
}
},
Creado(){
},
Instalado(){
Esto. $socket.emit('join', {
Nombre de usuario: this.xvalue,
ID de usuario: "js". // Para servicio al cliente, esta es la identificación del servicio al cliente.
Contraseña: "contraseña"
});
},
Socket: {
Conectar ( ) {
Esto. $ socket.emit('join', {
Nombre de usuario: this.xvalue,
id de usuario: "js",
Contraseña: "contraseña"
p>
});
},
recibirmsg(datos){? // Escuche los eventos del mensaje, los métodos los define y proporciona el fondo.
console.log(datos);
this.cs(datos);
},
Cerrar sesión (datos) {? // Escuche los eventos del mensaje, los métodos los define y proporciona el fondo.
console.log(datos);
this.cs(datos);
},
},
Método:{
getva bk(){
//Enviar información al servidor.
Esto. $socket.emit('sendmsg', {
Nombre de usuario: this.xvalue,
userid: "fs", /// Este es el ID de cliente del servicio de atención al cliente.
p>Contraseña: "contraseña"
});
},
Secretario Jefe de Administración (Datos)
let chat content = document . getelementbyid('chat content')
let newMsg = document . createelement('div')
let msg content = document . span')
newmsg . append(contenido del mensaje)
msgContent.innerText = data.msg
newmsg lista de clases add('self-msg'. )
p>contenido del chat .append(newMsg)
}
}
}
& lt /script & gt;
& ltstyle alcance>
& lt/style>
-end.