vue node.js socket.io chat uno a uno express
node.js
npm install socket.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')
puerto const = 2000
const pddUrl = 'http://192.168.1.178'
var servidor = require('http').Servidor(aplicación) ;
var io = require('socket.io')(servidor);
const bodyParser = require('body-parser');
aplicación .use(bodyParser.urlencoded({
extended: true
}));
//Establecer acceso entre dominios
app .all("*", function(req, res, next){
//Establece los nombres de dominio que pueden cruzar dominios, * significa que cualquier nombre de dominio puede cruzar dominios
res.header( "Access-Control-Allow-Origin", "*");
//Tipos de encabezado permitidos
res.header('Access- Control-Allow-Headers', ' Tipo de contenido, Longitud del contenido, Autorización, Aceptar, -Control-Allow-Métodos", "BORRAR, PUBLICAR, PUBLICAR, OBTENER, OPCIONES");
if ( req.method.toLowerCase() == 'options')
res.send(200);?//Dejar que las opciones intenten solicitar una finalización rápida
else
siguiente();
})
app.get('/', función(req, res){
res.send(' lt;h1gt;hola web showlt;/h1gt;');
});
/*Inicio*/
let arrAllSocket = []; /p>
io.on('conexión', función(socket) {
/************Unirse al chat********** ******/
//obj modelo
/*
obj={
nombre de usuario: this.xvalue ,
? ID de usuario: "fs",
p>
? contraseña: 'contraseña'
}
*/
socket.on('unirse', función (obj) {
p>
console.log(obj.userid 'join')
arrAllSocket[obj.userid] = socket
})
/** **********************************/
/*** *** Recibir mensajes enviados por personas *********/
socket.on('sendmsg', function (data) {
console.log( datos)
let target = arrAllSocket[data.userid]
let res = {
código: 200,
msg: datos .username,
p>self: true,
}
if (target) {
//Enviar mensaje a la persona especificada
target.emit('receivemsg', res)
console.log(res)
}
});
/ ************Escuche la salida del usuario****************/
socket.on( 'desconnecta', function(data) {
let res = {
code: 200,
msg: `${data.userid} ha salido del sala de chat`,
self: true,
}
io.emit('logout', res
console. log(data.userid 'Salió de la sala de chat');
});
});
server.listen(port, () =gt ; console.log(`Aplicación de ejemplo escuchando en el puerto ${pddUrl}：${port}`))
Paso 2: página a-----Cliente
1. Instalar dependencias
npm install vue-socket.io --save
2. Introducir en main.js
importar VueSocketIO desde 'vue-socket.io'
Vue.use(new VueSocketIO({
debug: true,
conexión: 'xx', //Esta es la ruta, por ejemplo: http ://192.168.1.17 8
vuex: {},
}))
3. En la página
lt templategt; ;
lt; divgt;
?lt;divgt;
lt;pgt;Ventana de chatlt;/pgt;
lt; div id="chatContent"gt;<
/p>
lt;/divgt;
?lt;/divgt;
?lt;divgt;
lt;input v-model= "xvalue" /gt;
lt;button @click="Getvabk"gt;Sendlt;/buttongt;
lt;button @click="Getbackvabk"gt;Salir ;/ botóngt;
?lt;/divgt;
lt;/divgt;
lt;/templategt;
lt;
exportar valor predeterminado {
nombre: "Mypersonal-zxlx",
?data(){
devolver{
?fslista: [],
?jsLista: [],
?xvalue: '',
}
?},
?created() {
?},
?mounted() {
//Enviar mensaje al servidor
this.$socket.emit('join',{
?nombre de usuario: this.xvalue,
?userid: "fs", // Este es tu id
?contraseña: 'contraseña'
});
?},
?sockets: {
conexión() {
? //Unirse al chat
?this.$socket.emit('unirse', {
nombre de usuario : this.xvalue,
ID de usuario: "fs", //Este es el ID de la persona con la que deseas chatear
Contraseña: 'contraseña'
? });
},
recibirmsg(data) {?//Escuche el evento de recepciónmsg, el método lo define y proporciona el fondo
?console.log( datos);
?this.cs(data);
},
cerrar sesión(datos) {?//Escuchar el evento de cierre de sesión, el método se define en segundo plano y se proporciona
?console.log(data
?this.cs(data); },
? },
?métodos: {
Getbackvabk(){
?this.$socket.emit(' desconectar', {
nombre de usuario: this.xvalue,
ID de usuario: "fs",
contraseña: 'contraseña'
? });
},
Getvabk(){
?//Enviar información al servidor
?this.$socket .emit('sendmsg', {
nombre de usuario: this.xvalue,
ID de usuario: "js",
contraseña: 'contraseña'
?});
},
?cs(datos) {
let chatContent = document.getElementById('chatContent')
let newMsg = document.createElement('div')
let msgContent = document.createElement ('span')
newMsg.append(msgContent)
msgContent.innerText = data.msg
newMsg.classList.add('self-msg' )
chatContent.append(newMsg)
?}
?}
}
lt;/ scriptgt;
lt; style Scopedgt;
lt;
Paso 3: página b------Puerto de servicio al cliente
lt;templategt;
lt;divgt;
?cs
?lt;divgt;
lt;pgt ;Ventana de chatlt;/pgt;
lt;div id="chatContent"gt;
lt;/divgt;
?lt;/divgt; /p>
?lt;divgt;
lt;input v-model="xvalue" /gt;
lt;button @click="Getvabk"gt; lt;/buttongt;
?lt;/divgt;
lt;/divgt;
lt;/templategt;
lt scriptgt;
exportar valor predeterminado {
nombre: "cs",
?data(){
?return{< / p>
xvalue: ""
?}
?},
?creado() {
?} ,
?mounted() {
this.$socket.emit('unirse', {
?nombre de usuario: this.xvalue,
?userid: "js", //Para servicio al cliente, este es el ID de servicio al cliente
?contraseña: 'contraseña'
});
?},
?sockets: {
conexión() {
?this.$socket.emit('unirse', {
nombre de usuario: this.xvalue,
ID de usuario: "js",
contraseña: 'contraseña'
?}); p> },
recibirmsg(data) {?//Escuchar mensaje
En el evento, el método lo define y proporciona el fondo
?console.log(data)
?this.cs(data); ,
logout(data) {?//Escuche el evento del mensaje, el método lo define y proporciona el fondo
?console.log(data);
?this.cs(datos);
},
?},
?métodos: {
Getvabk( ){
?//Enviar información al servidor
?this.$socket.emit('sendmsg', {
nombre de usuario: this.xvalue,
ID de usuario: "fs", ////Para servicio al cliente, este es el ID del cliente
Contraseña: 'contraseña'
?});
},
cs(data){
?let chatContent = document.getElementById('chatContent')
?let newMsg = document.createElement('div ')
?let msgContent = document.createElement('span')
?newMsg.append(msgContent)
?msgContent .innerText = datos.msg
?newMsg.classList.add('self-msg')
?chatContent.append(newMsg)
}
}
}
lt;/scriptgt;
lt;estilo alcancedgt;
lt;/stylegt ;
--------------------------endEnd--------------- ---