nodejs+vue+mysql+websocket完成一个简易的桌面聊天应用(1)

这个桌面应用使用nodejs开发后端服务,vue2+electron打包为桌面应用

1.后端服务

1.初始化

npm init -y

2.安装express

Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

npm i express

3.链接mysql

安装mysql

npm i mysql

链接mysql,新建mysql.js文件

const mysql = require("mysql")
const Dbs = {
    host: 'localhost',//数据库所在ip地址,这里localhost代表的是本地数据库
    user: 'root',//用户名
    password: '408220535',//密码
    database: 'game'//数据库名称
}
const connection = mysql.createConnection(Dbs)

connection.connect((err)=>{
    if(err) throw err
    console.log('链接成功');
})
module.exports = connection

创建index.js作为根文件 ,将mysql.js引入根文件的index.js

const express = require('express')
const app = express()
require('./mysql.js')

 app.listen(3033, function () {
  console.log("中间服务已启动！监听端口3033")
})

在终端运行 node index.js ,这样就代表mysql链接成功

数据库设置参考(对数据库的了解不深,表设计只作为参考)

4.编写接口 

使用node-uuid生成用户id保证唯一性

 npm i node-uuid

安装body-parser依赖(不装会出现使用过post请求时body为空) 在index.js文件中引入 body-parser

npm i body-parser

const bodyParser = require('body-parser')
//配置模板引擎body-parser一定要在app.use(router)挂载路由之前
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

新建一个login.js,在这个文件里编写登录的接口,编写完引入根文件index.js

//创建路由
const { Router } = require('express')
const login = new Router()
const mysql = require('../mysql')
const uuid = require("node-uuid");

login.post('/login', async (req, res) => {
    let data = {
        code: '',
        data: {},
        message: ''
    }
    console.log(req.body);
    let sql = `SELECT * FROM user WHERE phone = "${req.body.phone}" AND password = "${req.body.password}"`
    mysql.query(sql, (err, result) => {
        if (err) {
            console.log(err);
        } else {
            if (!(result.length)) {
                data.code = 203
                data.message = '手机号或密码错误'
                res.send(data)

            } else {
                let sql = `UPDATE  user SET  online=1 WHERE Id=${result[0].Id}`
                mysql.query(sql, (err, result) => {
                    if (err) {
                        console.log('失败');
                    } else {
                        console.log('成功');
                    }
                })
                data.code = 200
                data.message = '成功'
                res.send(data)
            }

        }
    })

});
//注册
login.post('/signin', (req, res) => {
   ....

})
//退出登录
login.post('/logOut', async (req, res) => {
  ....

});
module.exports = login

使用postman测试登录 (数据库记得添加对应账号)

5.链接websocket

1.安装ws

npm i ws

2.在index.js文件中引入

const WebSocket = require('ws');
// 引用Server类:
const WebSocketServer = WebSocket.Server;
exports.wss = new WebSocketServer({
  server: server
});

如果想和http接口使用同一套端口按照图片设置

6.编写websocket接口

const wss = require('./index.js').wss
const mysql = require('./mysql')

const clients = []; // 与客户端建立的连接池
wss.on('connection', function (ws, request, client) {
    let url = request.headers.origin + request.url; //用户连接ws的地址和参数
    let Id = getParameters(url).Id;
    if (Id) {
        clients.push({ Id, ws: ws }); // 连接时只要url带Id参数，直接往客户端数组里塞入连接池信息
    }

    ws.on('message', function (message) {
        message = JSON.parse(message)
       //私聊
        if (message.query[0] == 'privateChat') {
            let sql = ` INSERT INTO chitchat (senderId, receiverId, endcontent) VALUES ('${message.friendId}','${message.Id}',  '${message.msg}');`//把消息存到数据库
            mysql.query(sql, (err, result) => {
                if (err) {

                    ws.send()
                } else {

                    message.data = result
                    message.code = 1009
                    ws.send(JSON.stringify(message))//消息发送成功返回

                    message.code = 1114
                    message.sequence = 1113
                    wss.broadcast(message)//通知好友
                }
            })
        }
       
    })
});
wss.broadcast = function (data) {//群消息或者给特定的人发消息(现在只适合给特定的人发消息)
    clients.forEach(function (client) {
        // console.log(client.Id,client.ws);
        if (data.friendId == client.Id) {
            client.ws.send(JSON.stringify(data));
        }

    });
};
const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`
)//获取url地址中的参数