Vue+Socket+MySQL 實現小型移動端聊天室

項目介紹

WebSocket 是流行的數據交互方式，在學習了 websocket 後，打算使用 vue + websocket + mysql 來完成一個小型的移動端聊天室，簡單的實現登陸、註冊、發送消息等操做。進一步鞏固本身對 vue 和 nodeJs 的掌握。

項目地址

項目採用了:

• vux: 移動端UI 框架
• vue-router 路由管理
• socket.io 建立 websocket 服務
• MySQL 用戶數據管理
• vue-cli 3.0 建立項目

啓動項目

啓動服務器

npm run serve
複製代碼

啓動客戶端

npm run dev
複製代碼

項目截圖

登陸界面

聊天室

如下是我對項目的總結

客戶端

在 vue-cli 3.0 中引入 vux

vux 官方還不支持直接在 vue-cli 3.0 中引入 vux，須要本身修改配置。

解決方法是在項目目錄下建立 vue.config.js 文件,添加項目配置:

const vuxLoader = require("vux-loader")
module.exports = {
  configureWebpack: config => {
    vuxLoader.merge(config, {
      plugins: ["vux-ui"]
    });
  }
};
複製代碼

以後運行項目，這時可能會遇到 vue-loader 解析文件錯誤的狀況，這時須要安裝 14.2.2版本的 vue-loader 才能解決問題：

npm install vue-loader@14.2.2 -D
複製代碼

以後從新運行項目

vue-router 路由傳遞參數

vue-router 傳遞參數有兩種方法：

1. 使用編程式導航 router.push
2. 使用聲明式導航 <router-link>

編程式導航

編程式導航傳遞的參數能夠是字符串、也能夠是對象。

字符串是直接使用路由地址以字符串方式進行跳轉，簡單但不能傳遞參數。

this.$router.push("/");
複製代碼

對象能夠用來傳遞參數。接收 name(命名路由)和 params(傳遞參數)。 name 是在定義路由時指定 path 路徑對應的 name.

this.$router.push({ name: "index", params: { username: 'xxx' }})
複製代碼

在另外一個頁面接收傳遞的參數

this.$route.params.username;
複製代碼

注意: name 跟 params 配對; path 跟 query 配對。 使用 query 在刷新頁面時數據不會丟失。

聲明式導航

聲明式導航傳遞參數相似。

使用字符串

<router-link to="/">首頁</router-link>
複製代碼

使用對象

<router-link to="{ name: 'index', params: { username: 'xxx' }}">首頁</router-link>
複製代碼

服務端

使用 socket.io

在 server.js 中建立 socket,監聽客戶端的鏈接，並進行雙向通訊。

const http = require("http");
const io = require("socket.io");
// 建立 http 服務器
let httpServer = http.createServer();
httpServer.listen(8080);
// 建立 socket
let ws = io.listen(httpServer);
// 服務器監聽客戶端鏈接
ws.on("connection", sock => {
  // 處理操做
  // ...
  // 接收客戶端發送的消息
  sock.on('xx', () => {});
  // 服務端往客戶端發送消息
  sock.emit('xx', data);
}
複製代碼

客戶端index.html中

<!-- 引入客戶端腳本 -->
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<!-- 建立鏈接 -->
<script> const socket = io.connect('ws://localhost:8080/'); // 客戶端往服務器發送消息 socket.emit('xx', data); // 客戶端接收服務器消息 socket.on('xx', () => {}); </script>
複製代碼

MySQL 操做

數據庫結構

• id 主鍵、自增
• username 用戶名
• password 密碼
• online 是否在線,可用於統計在線人數

引入 mysql 模塊

const mysql = require("mysql");
// 鏈接數據庫
let db = mysql.createPool({
  host: "localhost",
  user: "test",
  password: "test",
  database: "websocket"
});

// 數據庫操做
db.query('數據庫操做語句', (err, data) => {
  // 回調函數
  // err 爲執行失敗的錯誤信息
  // data 爲執行成功的返回數據
})
複製代碼