JavaScript on Homura's Blog

[鐵人賽Day28] 實作Web即時共同編輯文件 (8) - 最後的BUG修正+小功能添加

Sat, 10 Nov 2018 10:23:05 +0800

真的是越複雜的功能，越容易出現不少的BUG，前面做了7篇原本以為我大概的狀況我都有抓到，直到昨天做完發現蠻多BUG，所以今天就來幫這個時做來做最後修正吧！

不同文件間上線名單互相干擾BUG

這個還真的是做完才發現，我們需要新增群組的規則，首先我們要到FileHub取得文件這邊，使用Groups.AddToGroupAsync()把使用者加入群組，然後在傳回上線人員清單時，改成只傳群組內的人，這邊的群組也就等於是哪個文件，所以群組名稱就是使用FileName。

public async Task GetFile(string fileName, string name)
{
    // 取得文件
    var file = _service.GetFile(fileName);
    // 加入使用者
    _service.AddUser(fileName, Context.ConnectionId, name);
    // 加入群組
    await Groups.AddToGroupAsync(Context.ConnectionId,fileName);
    // 回傳文件
    await Clients.Caller.SendAsync("ReceiveFile", file);
    // 回傳同個文件編輯者的上線清單
    await Clients.Group(fileName).SendAsync("ReceiveUserList", fileName, _service.GetUserList(fileName));
}

再來編輯文件和取消編輯一樣改成群組傳送

// 編輯文件
public async Task EditText(string fileName, string cellName, string text)
{
    var editText = _service.EditFileCell(fileName, cellName, text, Context.ConnectionId);
    await Clients.Group(fileName).SendAsync("ReceiveEditText", fileName, cellName, editText.text, editText.editor);
}

// 取消編輯文件
public async Task CancelEditText(string fileName, string cellName)
{
    var editText = _service.CancelEditFileCell(fileName, cellName);
    await Clients.Group(fileName).SendAsync("ReceiveCancelEditText", fileName, cellName);
}

最後是斷線時的處理，我們新增一個RemoveUser的方法，在斷線時呼叫此方法來移除使用者。

// 斷線時移除使用者
public async Task RemoveUser(string fileName, string name)
{
    // 從群組移除使用者
    await Groups.RemoveFromGroupAsync(Context.ConnectionId, fileName);
    // 移除使用者並重新傳回使用者的表單 
    await Clients.Group(fileName).SendAsync("ReceiveUserList", fileName, _service.RemoveUser(Context.ConnectionId));
}

// 斷線
public override async Task OnDisconnectedAsync(Exception exception)
{
    await base.OnDisconnectedAsync(exception);
}

前端呼叫寫在關閉視窗事件裡，呼叫connection.invoke('RemoveUser')傳回編輯的文件和欄位名。

window.onbeforeunload = function () {
    connection.invoke('CancelEditText', LoadFile, editCell).catch(function (err) {
        return console.error(err.toString());
    });
    connection.invoke('RemoveUser', LoadFile, editCell).catch(function (err) {
        return console.error(err.toString());
    });

DEMO

添加編輯者提示

應該有人會覺得，編輯中表格只是標示顏色當在人很多時，會有找不到是誰的狀況，所以來增加個名字提示功能。

由於之前我們是直接插在Div內，這樣會抓不到名字，所以首先到來修改一下名字區塊，先來定義一下css樣式，新增一個userName

1
2
3

.userName {
    display: inline-block;
}

之後在connection.on("ReceiveUserList")的地方，建立一個div區塊塞入剛剛建立的樣式，在把名字塞進去。

// 傳送使用者清單
connection.on("ReceiveUserList", function (fileName, userListData) {
    userList.innerHTML = '';
    for (var i = 0; i < userListData.length; i++) {
        // 略...
        var userName = document.createElement('div');
        userName.className = 'userName';
        if (name == userListData[i].name) {
            userName.innerHTML = '自己';
            user.appendChild(userName);
        }
        else {
            userName.innerHTML = userListData[i].name;
            user.appendChild(userName);
        }
        userList.appendChild(user);
    }
});

然後再修改表格時，connection.on("ReceiveEditText")建立title塞入，因為是第2個div所以要呼叫childNodes[1]。

connection.on("ReceiveEditText", function (fileName, cellName, text, user) {
    var cell = document.getElementById(cellName);
    // 判斷是否為自己
    if (getQueryStringByName('id') != user) {
        cell.childNodes[0].value = text;
        cell.childNodes[0].title = document.getElementById(user).childNodes[1].innerHTML;
        cell.childNodes[0].style.backgroundColor = document.getElementById(user).childNodes[0].style.backgroundColor;
    }
});

取消編輯的部分也要消除title屬性

connection.on("ReceiveCancelEditText", function (fileName, cellName) {
    var cell = document.getElementById(cellName);
    cell.childNodes[0].title = '';
    cell.childNodes[0].style.background = 'transparent';
});

DEMO

由於後來試了一下，Google的文件編輯，其實並沒鎖住2個人同時編輯同個表格，所以這部份我就不做了，所以文件共同編輯我就做到這邊囉，明天就來教教大家該怎麼去部屬自己的SignalR App到Server上面。

範例下載

範例下載

[鐵人賽Day27] 實作Web即時共同編輯文件 (7) - 新增自訂文件及載入自訂文件

Fri, 09 Nov 2018 20:26:31 +0800

今天就來完成最後的部分吧！最後要載入和建立自訂的文件，首先來先來做建立文件的部分

建立自訂文件

首先先建立切換畫面事件，讓建立文件的Button能切換頁面

goCreateFileBtn.addEventListener('click',function(){
    // 切換成建立文件選擇畫面
    fileListDiv.style.display = 'none';
    createFileDiv.style.display = '';
});

建立文件畫面

再來是建立文件的畫面

<button id="cancelCreateFile" type="button" >取消</button><br><br>
文件名稱：<input id="newFileName" type="text"  class="input"><br><br>
欄位數：<input id="newCol" type="text"  class="input"><br><br>
列位數：<input id="newRow" type="text"  class="input"><br><br>
<button id="createFileBtn" type="button">建立文件</button><br>

讀取DOM

1
2

var cancelCreateFile = document.getElementById('cancelCreateFile');
var createFileBtn = document.getElementById('createFileBtn');

建立新增文件事件

新增取消建立文件按鈕事件，讓他返回文件選擇畫面

cancelCreateFile.addEventListener('click',function(){
    // 切換成文件選擇畫面
    createFileDiv.style.display = 'none';
    fileListDiv.style.display = '';
});

新增建立按鈕事件，把Form的資料都丟回去就行，接收部分一樣是connection.on("ReceiveUserList")，昨天已經建立了，所以就不需要接收事件了，成功後用.then()切換畫面，因為connection.on("ReceiveUserList")不只有建立文件時接收，所以改成.then()裡面。

createFileBtn.addEventListener('click', function () {
    var newFileName = document.getElementById('newFileName').value;
    var newRow = document.getElementById('newRow').value;
    var newCol = document.getElementById('newCol').value;

    connection.invoke("CreateFile", newFileName, newCol, newRow).then(function(){
        // 切換成文件列表畫面
        createFileDiv.style.display = 'none';
        fileListDiv.style.display = '';
    }).catch(function (err) {
        return console.error(err.toString());
    });
});

再來到後端的FileHub引用泛型和Models

1
2

using System.Collections.Generic;
using EditFileWeb.Models;

然後到建立一個方法CreateFile，內容跟之前建立測試文件一樣，只要把內容換成前端Form傳回的值就行

public async Task CreateFile(string fileName, int col, int row)
{
    var fileModel = new FileModel();
    fileModel.creator = Context.ConnectionId;
    fileModel.filename = fileName;
    fileModel.row = row;
    fileModel.column = col;
    fileModel.editor = new List<UserModel>();
    List<CellModel> textList = new List<CellModel>();
    for (int i = 0; i < col; i++)
    {
        for (int j = 0; j < row; j++)
        {
            var cellModel = new CellModel();
            cellModel.lockState = true;
            cellModel.text = "";
            cellModel.cellName = $"{i}{j}";
            textList.Add(cellModel);
        }
    }
    fileModel.textList = textList;
    _service.AddFile(fileModel);

    await Clients.All.SendAsync("ReceiveFileList", _service.GetFileList());
}

讀取文件部分修改

回到前端部分，讀取文件的按鈕事件，先把讀取中的LoadFile對象換成選擇的文件fileName，再來因為我們已經多了名稱的機制，所以讀取文件時多傳一個name回去

// 取得文件按鈕事件
getFileBtn.addEventListener('click', function () {
    // 去得選擇文件的名稱
    var fileName = document.getElementById('fileList').value;
    // 使用中的文件變數
    LoadFile = fileName;

    connection.invoke("GetFile", fileName, name).catch(function (err) {
        return console.error(err.toString());
    });
});

建立表格的方式我們不需要改，只需加入切換畫面就好

connection.on("ReceiveFile", function (file) {
    // 切換成文件編輯畫面
    fileListDiv.style.display = 'none';
    fileDiv.style.display = '';

    // 建立文件
    // 略....

});

使用者清單改用名稱顯示

connection.on("ReceiveUserList")改成使用name來判斷是不是自己，塞進去的名稱也改成name

connection.on("ReceiveUserList", function (userListData) {
    userList.innerHTML = '';
    for (var i = 0; i < userListData.length; i++) {
        var user = document.createElement('span');
        user.id = userListData[i].id;
        user.className = 'user';
        var userColor = document.createElement('div');
        userColor.className = 'userColor';
        userColor.style.backgroundColor = userListData[i].color;
        user.appendChild(userColor);
        // 判斷對象改成名稱
        if (name == userListData[i].name)
            user.append('自己');
        else
            user.append(userListData[i].name); // 改成塞進名稱
        userList.appendChild(user);
    }
});

後端也需要修改，首先是FileService的AddUser，需要增加接收一個使用者名稱變數name，然後塞進UserModel容器內。

public bool AddUser(string fileName, string id, string name)
{
    // 找出哪個file
    var file = (from f in list where f.filename == fileName select f).FirstOrDefault();
    var userModel = new UserModel();
    var rnd = new Random();
    userModel.id = id;
    userModel.name = name;
    // 顏色隨機產生
    userModel.color = $"rgb({rnd.Next(0, 255)}, {rnd.Next(0, 255)}, {rnd.Next(0, 255)})";
    file.editor.Add(userModel);
    return true;
}

再來FileHub部分，也是多一個名稱變數，使用AddUser新增進去就行。

public async Task GetFile(string fileName, string name)
{
    // 取得文件
    var file = _service.GetFile(fileName);
    // 加入使用者
    _service.AddUser(fileName, Context.ConnectionId, name);

    await Clients.All.SendAsync("ReceiveUserList", _service.GetUserList(fileName));
    await Clients.Caller.SendAsync("ReceiveFile", file);
}

這樣就大功告成啦！！！

DEMO

發現時間有點長，多個影片版

做完這邊發現有不少BUG，明天再來把這些小BUG慢慢地修正完成！

範例下載

範例下載

[鐵人賽Day26] 實作Web即時共同編輯文件 (6) - 新增登錄畫面及選擇文件列表

Thu, 08 Nov 2018 16:14:18 +0800

今天我們要來做自訂表格內容和連線列表，既然建立表格的方法都訂好了，當然要能從前端建立啊!XD

各畫面區塊建立

這次我想做4個畫面登入畫面、文件選擇畫面、文件建立表單、文件編輯畫面，首先把div區塊做出來

<!-- 登入畫面 -->
<div id="loginDiv">
</div>

<!-- 文件選擇畫面 -->
<div id="fileListDiv" style="display:none">

</div>

<!-- 文件編輯畫面 -->
<div id="fileDiv" style="display:none">
    <div class="onlineList" id="userList">
    </div>
    <hr>
    <table id="table">

    </table>
</div>

<!-- 文件建立表單 -->
<div id="createFileDiv" style="display:none">

</div>

然後先建立個區塊DOM物件變數

var loginDiv = document.getElementById('loginDiv');
var fileListDiv = document.getElementById('fileListDiv');
var fileDiv = document.getElementById('fileDiv');
var createFileDiv = document.getElementById('createFileDiv');

登入畫面建立

首先我們先做登錄畫面，登入畫面只需要輸入名稱就行，因為我們沒做資料庫，不需要帳號密碼XD

Name:
<input id="name" type="text" class="input">
<br>
<button id="connectBtn" type="button">連線</button>

還有因為把input改成透明了，所以名稱這邊要給他樣式，不然看不到

.input{
    background: white;
    border: 1px solid;
}

取得button物件和名稱變數name，name用來儲存名字使用

1
2

var connectBtn = document.getElementById('connectBtn');
var name = '';

登入後跟Serve開始連線，也就是說之前的連線事件要放進button的onclick事件裡面，然後先切換區塊及儲存名字，在開始連線

connectBtn.addEventListener('click', function () {
    // 切換成文件選擇畫面
    loginDiv.style.display = 'none';
    fileListDiv.style.display = '';
    // 儲存名字
    name = document.getElementById('name').value;
    // 連接事件
    connection.start()
    .then(function () {
        connection.invoke('GetFile', LoadFile).catch(function (err) {
            return console.error(err.toString());
        });
    })
    .catch(function (err) {
        return console.error(err.toString());
    });
});

註：原本的connection.start()記得刪除

連線文件列表建立

我們一樣建立一個select元素當列表，一樣記得給他multiple屬性，上面放建立文件的button，下面放選擇文件的button

<button id="goCreateFileBtn" type="button">建立新文件</button>
<br>
<select id="fileList" multiple>
    
</select>
<br>
<button id="getFileBtn" type="button">選擇文件</button>

載入DOM

1
2
3

var getFileBtn = document.getElementById('getFileBtn');
var fileList = document.getElementById('fileList');
var goCreateFileBtn = document.getElementById('goCreateFileBtn');

再來到FileService建立取得所有文件的方法GetFileList

public List<FileModel> GetFileList()
{
    return list;
}

然後到FileHub也新增取得所有文件的方法GetFileList，注意回傳給呼叫的User就好，傳送回去的方法叫做ReceiveFileList

public async Task GetFileList()
{            
    await Clients.Caller.SendAsync("ReceiveFileList", _service.GetFileList());
}

回前端的連線connectBtn的click事件從GetFile改成GetFileList，然後傳回的變數LoadFile刪除。

connection.start()
.then(function () {
    connection.invoke('GetFileList').catch(function (err) {
        return console.error(err.toString());
    });
})
.catch(function (err) {
    return console.error(err.toString());
}

最後得到資料後，把資料填入select列表內

connection.on("ReceiveFileList", function (fileListDate) {
    // 清空列表
    fileList.innerHTML = '';
    // 建立列表
    for (var i = 0; i < fileListDate.length; i++) {
        var option = document.createElement('option');
        option.innerHTML = fileListDate[i].filename;
        fileList.appendChild(option);
    }
});

DEMO

今天就這些，明天來完成新增文件表單及讀取文件的部分

範例下載

範例下載

[鐵人賽Day25] 實作Web即時共同編輯文件 (5) - 一些小功能修正

Wed, 07 Nov 2018 19:27:26 +0800

今天是一些小地方的修正，其實做到這邊還有很多需要修正的地方，一個是重整後編輯中的顏色不會重新讀取，一個是編輯中關閉不會回船取消編輯，就是在編輯的人沒移開編輯中的cell，會造成沒回傳取消編輯的狀態，今天就來修正一下這些問題吧！

重整後重新讀取顏色

首先修改一下FileHub，傳回資料的順序修改一下，改成ReceiveUserList先傳在傳送ReceiveFile

public async Task GetFile(string fileName)
{
    // 取得文件
    var file = _service.GetFile(fileName);
    // 加入使用者
    _service.AddUser(fileName, Context.ConnectionId);
    
    await Clients.All.SendAsync("ReceiveUserList", _service.GetUserList(fileName));
    await Clients.Caller.SendAsync("ReceiveFile", file);
}

在來是前端建立表格時加入判斷，如果是就著色

connection.on("ReceiveFile", function (file) {
    var count = 0;
    for (var i = 0; i < file.row; i++) {
        var row = document.createElement('tr');
        for (var j = 0; j < file.column; j++) {
            var cell = document.createElement('td');
            cell.id = file.textList[count].cellName;

            cell.addEventListener('click', cellEdit);
            cell.addEventListener('input', change);
            cell.appendChild(createCell(file.textList[count].text));
            // 判斷是否為編輯中的表格
            if (file.textList[count].editor != null)
                cell.childNodes[0].style.background = document.getElementById(file.textList[count].editor).childNodes[0].style.backgroundColor
            row.appendChild(cell);
            count++;
        }
        table.append(row);
    }
});

DEMO

因為換視窗時會取消編輯，所以我沒辦法用2個瀏覽器視窗DEMO，改架在IIS上，尤其他裝置連上內網一起操作，這邊我使用的裝置是ipad，ipad由於readonly會叫不出虛擬鍵盤，所以我有先拿掉，以下DEMO

避免編輯中關閉視窗

這邊可以依靠window的onbeforeunload事件來避免這問題，先創一個暫存編輯中cell id的變數editCell，然後再編輯時cellEdit丟入，最後呼叫onbeforeunload事件丟回取消事件。

var editCell;

function cellEdit() {
    this.childNodes[0].readOnly = false;
    this.childNodes[0].focus();
    editCell = this.id;
}

window.onbeforeunload = function(){
    connection.invoke('CancelEditText', 'TestFile', editCell).catch(function (err) {
        return console.error(err.toString());
    });
}

DEMO

延遲回傳編輯的資訊

正常來說每打一個字或是刪除一個字都在回傳，這樣實在太消耗Server資源，所以我們應該要延遲一小段時間在回傳，最簡單的方法就是使用lodash的debounce來完成這項工作安裝lodash

首先引用CDN

`1`	`<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>`

使用debounce()方法來延遲傳回去的時間，lodash預設變數是_，所以我們要這樣呼叫_.debounce()，debounce還能設定延遲幾毫秒，我們設定延遲300毫秒傳回，然後寫在cell的input事件裡就行，在connection.on("ReceiveFile")裡面，第一個參數塞進要執行的function，第二個則是延遲的時間

`1`	`cell.addEventListener('input', _.debounce(change, 300));`

DEMO

讀取文件換成變數

因為我們下一篇要來做自訂的文件，不一定都是讀取測試文件，所以要把文件名稱換成變數拉出來，使用取代的方式就行Ctrl+F左側箭頭按下去，把'TestFile'取代成LoadFile，然後新增一個LoadFile變數

`1`	`var LoadFile = 'TestFile';`

今天就這樣，明天來做多文件選擇和建立文件吧！

範例下載

範例下載

[鐵人賽Day24] 實作Web即時共同編輯文件 (4) - 幫編輯中的表格添加顏色

Tue, 06 Nov 2018 19:32:39 +0800

今天要來幫編輯中的表格更換顏色，顏色就是昨天做的使用者顏色，這次是要放到編輯的cell內，並且鎖住不讓其他人同時編輯。

幫編輯中的表格著色

我發現直接對表格誆著色會怪怪，所以改成表格背景著色，那麼就開始時做吧，我們前後端拆開來做，首先做後端。

後端部分

首先要來得先在後端的編輯動作中加入使用者，先來修改FileServie的EditFileCell的動作，加入修改使用者及表格預設鎖上的狀態，記得接收參數在多個user用來辨識目前修改人是誰。

public CellModel EditFileCell(string fileName, string cellName, string text,string user)
{
    // 找出哪個file
    var file = (from f in list where f.filename == fileName select f).FirstOrDefault();
    // 找出哪個cell
    var cell = (from c in file.textList where c.cellName == cellName select c).FirstOrDefault();
    // 修改內容
    cell.text = text;
    // 加入使用者
    cell.editor = user;
    // 鎖住cell
    cell.lockState = true;

    return cell;
}

修改FileHub的EditText動作，只要把ConnectionId使用EditFileCell方法丟進Service裡，再多加個回傳使用者就行

public async Task EditText(string fileName, string cellName, string text)
{
    var editText = _service.EditFileCell(fileName, cellName, text, Context.ConnectionId);
    await Clients.All.SendAsync("ReceiveEditText", cellName, editText.text, editText.editor);
}

前端部分

我們只需要幫ReceiveEditText加些料就行，首先先判斷這個修改表格的是否為自己，不是的話就修改表格顏色及接收修改過的內容

connection.on("ReceiveEditText", function (cellName, text, user) {
    var cell = document.getElementById(cellName);
    // 判斷是否為自己
    if (getQueryStringByName('id') != user){
        cell.childNodes[0].value = text;
        cell.childNodes[0].style.backgroundColor = document.getElementById(user).childNodes[0].style.backgroundColor;
    }
});

這樣就完成一半了!!!再來就是解開顏色的事件

取消未編輯的表格顏色

這邊一樣前後端拆開來做

後端部分

一樣要先在FileServie新增方法CancelEditFileCell，內容是刪除編輯的使用者，並解鎖

public CellModel CancelEditFileCell(string fileName, string cellName)
{
    // 找出哪個file
    var file = (from f in list where f.filename == fileName select f).FirstOrDefault();
    // 找出哪個cell
    var cell = (from c in file.textList where c.cellName == cellName select c).FirstOrDefault();
    // 加入使用者
    cell.editor = null;
    // 解鎖cell
    cell.lockState = false;

    return cell;
}

在來再FileHub新增CancelEditFileCell方法，裡面的動作比較簡單只是要取消編輯

public async Task CancelEditText(string fileName, string cellName)
{
    var editText = _service.CancelEditFileCell(fileName, cellName);
    await Clients.All.SendAsync("ReceiveCancelEditText", fileName, cellName);
}

前端部分

我們要再更換編輯表格時取消編輯的狀態，所以就是在cellLock裡面回傳取消編輯，比較要注意的是我們ID是放在td元素內，所以要像上一層元素取ID

1
2
3

connection.invoke('CancelEditText', 'TestFile', this.parentNode.id).catch(function (err) {
    return console.error(err.toString());
});

其他人接收到後則把顏色恢復為透明

connection.on("ReceiveCancelEditText", function (fileName,cellName) {
    var cell = document.getElementById(cellName);
    cell.childNodes[0].style.background = 'transparent';
});

這樣就完成啦

DEMO

其實做到這邊還有很多地方需要修正，明天我們就把一些小問題一次做完，今天就這樣啦！！

範例下載

範例下載

[鐵人賽Day23] 實作Web即時共同編輯文件 (3) - 加入上線使用者清單

Mon, 05 Nov 2018 20:02:42 +0800

昨天我們做到能互相傳遞編輯的文字，今天我們要來實現上線的名單吧！

建立上線名單

首先我們來做一下上線名單的樣式，Day11一個Select元素裝進去太醜了，這次我做成跟google一樣用橫的，放在表格的正上方，我要定義3個區塊的CSS，一個是上線列表、一個是代表的顏色區塊、一個是使用者。

.onlineList {
    display: inline;
    margin: 0px;
    padding: 0px;
}

.userColor {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    display: inline-block;
}

.user {
    display: inline-block;
    margin-right: 3px;
    padding-right: 5px;
    /* 分隔線 */
    border-right: 2px gray solid;
}

html部分記得放在表格上面

1
2

<div  id="userList" class="onlineList"></div>
<hr>

載入DOM

`1`	`var userList = document.getElementById('userList');`

後端部分

我們需要在後端控制加入和退出的動作，然後再把連線列表傳給所有人

修改FileService

首先先在FileService增加取得所有使用者、加入、移除使用者的功能，加入使用者AddUser在加入時，我們需要隨機產生一個代表色給他，主要注意的是這次的RemoveUser，不要使用LINQ的方式，改用foreach找出來user id，再移除他，移除後記得傳回名單，因為GetUserList是使用fileName的方式找出來，使用者離線時無法得知他用哪個文件。

public List<UserModel> GetUserList(string fileName)
{
    var file = (from f in list where f.filename == fileName select f).FirstOrDefault();

    return file.editor;
}

// 加入使用者
public bool AddUser(string fileName, string id)
{
    // 找出哪個file
    var file = (from f in list where f.filename == fileName select f).FirstOrDefault();
    var userModel = new UserModel();
    var rnd = new Random();
    userModel.id = id;
    // 顏色隨機產生
    userModel.color = $"rgb({rnd.Next(0, 255)}, {rnd.Next(0, 255)}, {rnd.Next(0, 255)})";
    file.editor.Add(userModel);
    return true;
}

// 移除使用者
public List<UserModel> RemoveUser(string id)
{
    List<UserModel> userList = new List<UserModel>();

    foreach (var file in list)
    {
        // 找出哪個file
        var editor = (from f in file.editor where f.id == id select f).FirstOrDefault();
        if (editor != null)
        {
            file.editor.Remove(editor);
            userList = file.editor;
        }
    }

    return userList;
}

修改FileHub

Hub不需要建立新的方法，但我們要修改2個方法，一個是取得使用者列表的GetFile()，一個是斷線時的OnDisconnectedAsync()

public async Task GetFile(string fileName)
{
    // 取得文件
    var file = _service.GetFile(fileName);
    // 加入使用者
    _service.AddUser(fileName, Context.ConnectionId);

    await Clients.Caller.SendAsync("ReceiveFile", file);
    await Clients.All.SendAsync("ReceiveUserList", _service.GetUserList(fileName));
}

public override async Task OnDisconnectedAsync(Exception exception)
{ 
    await base.OnDisconnectedAsync(exception);

    // 移除使用者並重新傳回使用者的表單
    await Clients.All.SendAsync("ReceiveUserList",  _service.RemoveUser(Context.ConnectionId));
}

後端到這邊完成！！

更新上線名單

首先我們需要知道自己的connectionid是多少，但是signalR好像沒提供這方法，但是物件裡有找到，但是是完整的連線URL，我們需要抓內部的queryString，先建立抓queryString的方法，我們用正則的方法過濾

function getQueryStringByName(name) {
    var result = connection.connection.transport.webSocket.url.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
    if (result == null || result.length < 1) {
        return "";
    }
    return result[1];
}

建立更新上線名單的事件，先清空userList，再把元素塞進去，然後再填入名單時只要叫上方的函數驗證倒是自己的connectionid的話，名稱就改成顯示自己，由於我們沒有作相關的會員制度，所以這邊還沒有名字，所以改由connectionid來顯示。

connection.on("ReceiveUserList", function (userListData) {
    userList.innerHTML = '';
    for (var i = 0; i < userListData.length; i++) {
        var user = document.createElement('span');
        user.id = userListData[i].id;
        user.className = 'user';
        var userColor = document.createElement('div');
        userColor.className = 'userColor';
        userColor.style.backgroundColor = userListData[i].color;
        user.appendChild(userColor);
        if (getQueryStringByName('id') == userListData[i].id)
            user.append('自己');
        else
            user.append(userListData[i].id);
        userList.appendChild(user);
    }
});

這樣就完成啦！

DEMO

參考 & 範例下載

[鐵人賽Day22] 實作Web即時共同編輯文件 (2) - 使用signalR同步文件內容

Sun, 04 Nov 2018 09:14:44 +0800

沒想到昨天光完成前端的部分就花那麼多時間，看來這次實作比上次難了不少，大概是因為沒使用套件的關係吧！ＸＤ

那麼今天就來做signalR同步的部分吧。

資料Binding

我們要來想想再修改資料成功後，要怎麼回應給Server，回應格式要怎麼訂，先來訂一下後端的資料格式吧！

建立容器

先創一個CellModel.cs，大致內容如下

using System;

namespace EditFileWeb.Models
{
    public class CellModel
    {   
        // cell名稱
        public string cellName{get;set;}     
        // Cell內容
        public string text { get; set; }
        // 編輯者
        public string editor { get; set; }
        // 有無上鎖
        public bool lockState { get; set; }
    }
}

再創一個UserModel用來裝使用者的資訊，這邊最重要的部份是要儲存使用者的代表顏色color，id為signalR產生的connectionid，name則是需要資料庫時讀取，不過我們這邊沒用，是我先預留的。

using System;
using System.Collections.Generic;

namespace EditFileWeb.Models
{
    public class UserModel
    {
        // id
        public string id { get; set; }
        // 名稱
        public string name { get; set; }
        // 代表色
        public string color { get; set; }  
    }
}

最後再創一個FileModel.cs，使用泛型Dictionary<T,T>來裝上面的上面的CellMode，再一個泛型List<T>來裝目前編輯的使用者

using System;
using System.Collections.Generic;

namespace EditFileWeb.Models
{
    public class FileModel
    {
        // 文件名稱
        public string filename { get; set; }
        // 行
        public int row { get; set; }
        // 列
        public int column { get; set; }
        // 文件內容
        public List<CellModel> textList { get; set; }
        // 使用中的文件用戶
        public List<UserModel> editor { get; set; }
        // 建立者
        public string creator { get; set; }

    }
}

建立FileServie

再來建立FileServie.cs用來儲存我們的文件資料，基本上就是新增和取得和新增file，在一個CreateTestFile來建立測試用的方法，比較特別的是EditFileCell修改cell的方法，這次我們用比較聰明的LINQ來達成，上一個實作寫太趕了，一直忘記List和Dictionary都有實作 IEnumerator，所以能用LINQ來做查詢修改。

using System;
using System.Collections.Generic;
using EditFileWeb.Models;
using System.Linq;

namespace EditFileWeb.Services
{
    public class FileService
    {
        private List<FileModel> list;
        public FileService()
        {
            list = new List<FileModel>();
            CreateTestFile();
        }
        // 取得文件
        public FileModel GetFile(string fileName)
        {
            var file = (from f in list where f.filename == fileName select f).FirstOrDefault();

            return file;
        }

        // 新增文件
        public bool AddFile(FileModel file)
        {
            list.Add(file);
            return true;
        }

        // 編輯文件
        public CellModel EditFileCell(string fileName, string cellName, string text)
        {
            // 找出哪個file
            var file = (from f in list where f.filename == fileName select f).FirstOrDefault();
            // 找出哪個cell
            var cell = (from c in file.textList where c.cellName == cellName select c).FirstOrDefault();
            cell.text = text;

            return cell;
        }

        // 建立測試File
        public void CreateTestFile()
        {
            var fileModel = new FileModel();
            fileModel.creator = "Test";
            fileModel.filename = "TestFile";
            fileModel.row = 5;
            fileModel.column = 5;
            fileModel.editor = new List<UserModel>();
            List<CellModel> textList = new List<CellModel>();
            for (int i = 0; i < 5; i++)
            {
                for (int j = 0; j < 5; j++)
                {
                    var cellModel = new CellModel();
                    cellModel.lockState = true;
                    cellModel.text = "";
                    cellModel.cellName = $"{i}{j}";
                    textList.Add(cellModel);
                }
            }
            fileModel.textList = textList;
            list.Add(fileModel);
        }
    }
}

建立FileHub

再來建立FileHub.cs，一樣建構子接收FileServie，今天先做2個方法就好GetFile()和EditText()

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;
using EditFileWeb.Services;

namespace EditFileWeb.Hubs
{
    public class FileHub : Hub
    {
        private FileService _service;
        public FileHub(FileService service)
        {
            _service = service;
        }

        public async Task GetFile(string fileName)
        {
            var file = _service.GetFile(fileName);
            await Clients.Caller.SendAsync("ReceiveFile", file);
        }

        public async Task EditText(string fileName, string cellName, string text)
        {
            var editText = _service.EditFileCell(fileName, cellName, text);
            await Clients.All.SendAsync("ReceiveEditText", cellName, editText.text);
        }

        // 連線
        public override async Task OnConnectedAsync()
        {
            await base.OnConnectedAsync();
        }
        // 斷線
        public override async Task OnDisconnectedAsync(Exception exception)
        {
            await base.OnDisconnectedAsync(exception);
        }
    }
}

Starup.cs先引用Hub和Service

1
2

using EditFileWeb.Hubs;
using EditFileWeb.Services;

再註冊FileService和signalR的Router

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    services.AddSingleton<FileService>();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseDefaultFiles();
    app.UseStaticFiles();

    app.UseSignalR(routes =>
    {
        routes.MapHub<FileHub>("/fileHub");
    });
}

前端處理

首先安裝前端signalR套件，再來最後的前端的部分，我們先把createTable()這方法刪掉，因為我們現在是要由後端丟回的資訊來決定怎麼畫表格。

取得資料畫出表格

首先我們要修改畫表格的方式，連線成功後馬上取得File的資訊，呼叫GetFile()方法，然後再接收方法內開始畫表格，因為我們file資訊內有設定row和column，所以就輕鬆用2個for迴圈畫出來就行，然後要再迴圈內幫cell建立ID

connection.start()
    .then(function () {
        connection.invoke('GetFile', 'TestFile').catch(function (err) {
            return console.error(err.toString());
        });
    })
    .catch(function (err) {
        return console.error(err.toString());
    });

connection.on("ReceiveFile", function (file) {
    console.log(file);
    var count = 0;
    for (var i = 0; i < file.row; i++) {
        var row = document.createElement('tr');
        for (var j = 0; j < file.column; j++) {
            var cell = document.createElement('td');
            cell.id = file.textList[count].cellName;
            cell.addEventListener('click', cellEdit);
            cell.appendChild(createCell());
            row.appendChild(cell);
            count++;
        }
        table.append(row);
    }
});

建立input change的方法

我們要在編輯表格時，邊寫資料邊回傳，所以要監聽所有input的change事件，這邊我們也可以寫在td內，因為input改變時td內的元素也會改變，有興趣可以查查JS冒泡事件，再建立一個接收用的事件，來修改所有人的表格內容。

function change() {
    console.log(this);
    connection.invoke('EditText', 'TestFile', this.id, this.childNodes[0].value).catch(function (err) {
        return console.error(err.toString());
    });
}

connection.on("ReceiveFile", function (file) {
    console.log(file);
    var count = 0;
    for (var i = 0; i < file.row; i++) {
        var row = document.createElement('tr');
        for (var j = 0; j < file.column; j++) {
            var cell = document.createElement('td');
            cell.id = file.textList[count].cellName;
            cell.addEventListener('click', cellEdit);
            // cell塞入change事件
            cell.addEventListener('input', change);
            // 建立cell填入後端紀錄的值
            cell.appendChild(createCell(file.textList[count].text));
            row.appendChild(cell);
            count++;
        }
        table.append(row);
    }
});

connection.on("ReceiveEditText", function (cellName, text) {
    document.getElementById(cellName).childNodes[0].value = text;
});

最後再建立cell時填入後端傳回的值，這樣不同時間進來的人就讀到一樣的內容

// 建立Cell
function createCell(text) {
    var input = document.createElement('input');
    input.addEventListener('blur', cellLock);
    input.value = text;
    input.type = 'text';
    input.readOnly = true;
    return input;
}

到這邊就完成啦!!!，明天我們再來寫其他細節的部分。

DEMO

範例下載

範例下載

[鐵人賽Day21] 實作Web即時共同編輯文件 (1) - 建立文件編輯介面

Sat, 03 Nov 2018 09:37:24 +0800

有沒有覺得第一次看到Google共用編輯文件很好玩，它把類似Excel功能搬到Web上，然後又能共同編輯，我們這次就是要來模仿做一個類似GOOGLE文件共同編輯的功能。

頁面的建立

我們要先建立一個可編輯的table，其實只要建立一個table元素然後裡面塞input元素就行，但是這樣會很醜長的一點都不像excel表格，所以我們要先來制定一下樣式

制定CSS樣式

首先先把input的框線和背景色去掉，背景色改成透明，然後選擇時的顏色我們改成橘色，height則是為了吃滿整個表格，outline-offset是為了讓選擇的框不會吃到空間。

input {
    background: transparent;
    border: 0;
    height: 100%;
    padding: 5px;
}

input:focus {
    outline-offset: 0px;
    outline-color: rgb(240, 142, 15);
    outline-width: 3px;
    outline-style: solid;
}

再來修改table樣式，border-collapse改成collapse可以讓表格線和table外框繪製在一起，tr和th框線統一成灰色，高為20px。

table {
    border-collapse: collapse;
}

th, td {
    border: 2px solid #dee2e6;
    height: 20px;
}

建立表格

表格我們要使用JS動態建立的方式，先建立一個空的table元素，

1
2
3

<table id="table">

</table>

再建立rowCount和cellCount2個變數來設定行和列，使用document.create()來建立元素，createCell用來建立cell，createTable用來建立row。

var rowCount = 5;
var cellCount = 5;
var table = document.getElementById('table');


function createCell() {
    var input = document.createElement('input');
    input.type = 'text';

    return input;
}

function createTable() {
    for (var i = 0; i < cellCount; i++) {
        var row = document.createElement('tr');
        for (var j = 0; j < rowCount; j++) {
            var cell = document.createElement('td');
            cell.appendChild(createCell());
            row.appendChild(cell);
        }
        table.append(row)
    }
}

createTable();

完成後得到的結果

編輯事件

這邊我們要先做最基本的編輯處理，再我們沒編輯的Cell時，我們應該要把它給鎖上，為什麼要這樣做呢？因為再多人編輯時，你不應該同時讓超過1個人共同編輯同一Cell，因為這樣會非常混亂，所以我們要建立2個事件，一個是編輯時解鎖，一個是未編輯時鎖上，上鎖的方式原本我是用disable來達成，但是發現有些瀏覽器會造成無法觸發click事件，所以改用readonly是更好的選擇。

// 未編輯鎖上Cell
function cellLock() {
    this.readOnly = true;
}
// 編輯時解鎖Cell
function cellEdit() {
    this.childNodes[0].readOnly = false;
    // 焦點移至input
    this.childNodes[0].focus();
}

註：這邊的this應該有人不知道是什麼，如果直接執行的話this會是window，但是我們塞在td和input裡，所以會變成td和input的DOM

我們要把用監聽2個事件，一個是onblur焦點離開元素時，一個是onclick焦點移動到元素上時，有點要特別注意的地方是onclick必須寫再td元素上，不然事件不會被觸發，所以上面的CellEdit才會往裡面的元素找，使用childNodes的方式，所以我們得修改一下建立的方式createTable和createCell。

function createTable() {
    for (var i = 0; i < cellCount; i++) {
        var row = document.createElement('tr');
        for (var j = 0; j < rowCount; j++) {
            var cell = document.createElement('td');
            cell.addEventListener('click', cellEdit,true);
            cell.appendChild(createCell());
            row.appendChild(cell);
        }
        table.append(row)
    }
}

function createCell() {
    var input = document.createElement('input');
    input.addEventListener('blur', cellLock);
    input.type = 'text';
    input.readOnly = true;

    return input;
}

完成結果

註：原本鎖定的方式我是用Disable，後來發現Firefox和Edge只能點擊表格框觸發，大概瀏覽器解釋方法不一樣，所以我們還是以Chrome為主，雖然可以改用DIV的方式，但是難度大增，所以還是先用table吧！

今天就先做到這樣吧！

參考 & 範例下載

[鐵人賽Day20] 實作一個即時投票系統 (5) - 讀取建立的投票

Fri, 02 Nov 2018 20:50:53 +0800

今天就是即時投票系統最後一篇了，讓我們努力把它完成吧！

讀取投票資料

首先我們要把畫面改一下，一堆按鈕投票感覺很笨

投票畫面修改

我們這次不要一堆按鈕，改成把選項全塞進一個select元素中，在加2顆按鈕，一個投票一個反對票

<div id="voteRoom" style="display:none">
    <div class="canvas">
        <canvas id="myChart"></canvas>
    </div>
    <select id="voteSelList">
        
    </select>
    <br />
    <button id="votePlus">投票</button>
    <button id="voteMinus">反對票</button>

</div>

修改VoteModel

在Day17時，我們是把已經訂好的資料一個一個push進陣列裡，但是現在選項都是使用者自訂出來的，所以我們要修改成更好的方法才行，基本上原本的都不需要變動，我們只需要在Mode增加2個get用的屬性就行，屬性內容一個傳回List<string>，也就是所有選項的名稱List，另一個則是票數List，這樣就剛好符合Chart.js名稱和data各一個陣列，那要怎麼回傳一個List呢？我們只需foreach迴圈把它讀出來就行了。

public class VoteModel
{
    public int id { get; set; }
    public string voteName { get; set; }
    public string creator { get; set; }
    public DateTime startDate { get; set; }
    public DateTime endDate { get; set; }
    public Dictionary<string, int> voteSelect { get; set; }

    public List<string> voteSelectNameList
    {
        get
        {
            List<string> list = new List<string>();
            foreach (var item in voteSelect)
            {
                list.Add(item.Key);
            }
            return list;
        }
    }
    public List<int> voteSelectCountList
    {
        get
        {
            List<int> list = new List<int>();
            foreach (var item in voteSelect)
            {
                list.Add(item.Value);
            }
            return list;
        }
    }
}

進入投票頁面並獲得資料

這邊要寫在進入入投票房間時，所以要寫在進入投票這顆按鈕上，首先我們先把Chart.js的資料來原JSON清空

var chartData = {
    type: 'bar',
    data: {
        labels: [] ,
        datasets: [{
            label: '',
            data: [],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
}

進入投票頁面，先做切換頁面的動作，再取得投票資料，記得要把選擇的投票名稱也傳到GetVote裡

// 進入投票頁面
goVote.addEventListener('click', function () {
    // 頁面切換
    voteMenu.style.display = 'none';
    voteRoom.style.display = '';

    // 取得資料
    connection.invoke("GetVote", selVote.value).catch(function (err) {
        return console.error(err.toString());
    });
})

修改原本的ReceiveVote，接到資料後，開始塞進資料來源chartData物件裡，再把選項填入voteSelList裡面

// 進入投票選單
connection.on("ReceiveVote", function (json) {
    // 資料填入
    chartData.data.datasets[0].label = json.voteName;
    chartData.data.labels = json.voteSelectNameList;
    chartData.data.datasets[0].data = json.voteSelectCountList;
    
    // 清空選項
    voteSelList.innerHTML = '';
    // 填充選項
    for (var i = 0; i < json.voteSelectNameList.length; i++) {
        var voteSel = document.createElement('option');
        voteSel.innerHTML = json.voteSelectNameList[i];
        voteSel.value = json.voteSelectNameList[i];
        voteSelList.appendChild(voteSel);
    }

    // 開始畫圖表
    myChart = new Chart(ctx, chartData);
});

最後是投票事件，只要把投票名稱改成selVote的值還有選項改成voteSelList的值，還有圖表重繪的事件Day17已經寫好了，改都不用改XD

// 投票事件
votePlus.addEventListener('click', function(){
    connection.invoke("AddVoteSelectCount", selVote.value, voteSelList.value).catch(function (err) {
        return console.error(err.toString());
    });
})
// 反對票事件
voteMinus.addEventListener('click', function(){
    connection.invoke("SubVoteSelectCount", selVote.value, voteSelList.value).catch(function (err) {
        return console.error(err.toString());
    });
})

這樣就完成啦！！！

DEMO

投票系統就到這邊告一段落啦！明天又是新的實作，敬請期待XD

範例下載

範例下載

[鐵人賽Day19] 實作一個即時投票系統 (4) - 建立投票列表

Thu, 01 Nov 2018 19:23:53 +0800

今天我們要來做投票列表，概念跟Day11的上線名單一模一樣，忘記的可以去回顧一下，那麼我們就開始吧！

建立列表HTML元素

我們先把voteMenu區塊設成顯示，改成voteFrom區塊隱藏

<div id="voteRoom" style="display:none">

</div>
<!-- 所有投票選單 -->
<div id="voteMenu">

</div>
<!-- 新增投票區 -->
<div id="voteForm" style="display:none">

</div>

建立一個select 元素當作列表，記得加入multiple讓它展開，寬和高有訂一下，再來是2顆Button，一顆進入建立投票的頁面，一顆進入選擇的投票房間頁面。

<button id="creatVote" type="button">建立投票</button>
<br>
<select id="selVote" multiple style="height:200px;width:100px">
</select>
<br>
<button id="goVote" type="button">進入投票</button>

建立頁面切換事件

1
2

var creatVote = document.getElementById('creatVote');
var goVote = document.getElementById('goVote');

建立後端取得投票資料方法

先到Hub建立取得方法，注意這邊取得時只要回傳給要求的用戶就好，不要全部都傳，不然會造成一個新的使用著上線想取得所有投票方法，每個人都全部丟一次資料，但是資料並無更新，所以這邊沒有這種必要。

public async Task GetVoteList()
{
    await Clients.Caller.SendAsync("ReceiveVoteList", _voteService.GetVoteList());
}

當連線成功時取得資料

連線時取得資料，當然要寫在連接成功後的事件，也就是connection.start().then()裡面，其實day17已經寫過了，但是那天寫的是只取得該筆投票，這次是全部投票所以要改用上面新寫的方法，之前的GetVote記得移除。

connection.start()
.then(function () {
    connection.invoke("GetVoteList").catch(function (err) {
        return console.error(err.toString());
    });
})
.catch(function (err) {
    return console.error(err.toString());
});

取得成功後先清空頭票選單，再binding到我們建立的select元素中，完成後返回投票選單，返回投票選單這邊是因為跟建立投票一樣的事件，如果你在建立投票表單的話則會切換回頭票選單。

connection.on("ReceiveVoteList", function (json) {
    selVote.innerHTML = '';
    for (var i = 0; i < json.length; i++) {
        var sel = document.createElement('option');
        sel.innerHTML = json[i].voteName;
        sel.value = json[i].voteName;
        selVote.appendChild(sel);
    }
    // 如果在建立投票頁面，則切換回投票選單
    if (voteMenu.style.display === 'none'){
        voteForm.style.display = 'none';
        voteMenu.style.display = '';
    }
});

成功後結果，你會再選單內看到之前建立的測試投票

今天就大概這樣，下一篇就是最後的頁面了。

範例下載

範例下載

[鐵人賽Day18] 實作一個即時投票系統 (3) - 自訂投票內容

Wed, 31 Oct 2018 19:22:29 +0800

今天繼續把投票系統沒做完的做完吧，上一篇我們是從後端建立一個新的投票，今天我們要做成改成前端建立投票，然後讓大家進去投票，這個部分有點長，所以也是拆成2偏來講。

建立UI頁面

這邊我們不需要真的建立3個HTML，只要使用<div>元素拆成3個區塊。

建立3個區塊頁面

3個區塊頁面分別是投票選單、新增投票表單、投票區塊，一次只顯示一個區塊，沒用的區塊我們把他的CSS的display屬性設成none

<!-- 投票頁面 -->
<div id="voteRoom" style="display:none">
    <div class="canvas">
        <canvas id="myChart"></canvas>
    </div>

</div>
<!-- 所有投票選單 -->
<div id="voteMenu" style="display:none">

</div>
<!-- 新增投票區 -->
<div id="voteForm">
</div>

載入頁面DOM 物件

1
2
3

var voteRoom = document.getElementById('voteRoom');
var voteMenu = document.getElementById('voteMenu');
var voteForm = document.getElementById('voteForm');

建立新增投票表單

首先我們先來做投票表單部分，一個input做投票名稱，一個select元素用來動態建立選項input，建立一個div裡面放動態建立的投票選項input

<button id="cancelCreateVote" type="button">取消</button>
<button id="submit" type="button" >送出</button><br>
投票名稱：<input id="voteName" type="text"><br>
投票選項數目：
<select id="selCount">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<div id="voteSel">

</div>

建立selCount的change監聽事件，每次變動都會動態建立N個input選項

var selCount = document.getElementById('selCount');
var voteSel = document.getElementById('voteSel');
var submit = document.getElementById('submit');

selCount.addEventListener('change', function () {
    voteSel.innerHTML = '';
    var count = selCount.value;
    for (var i = 0; i < count; i++) {
        var input = document.createElement('input');
        var br = document.createElement('br');
        input.type = 'text';
        input.id = `sel${i}`;
        voteSel.append(`選項${i + 1}：`);
        voteSel.appendChild(input);
        voteSel.appendChild(br);
    }
})

畫面大概像下圖

建立CreateVote方法

接下來我們要丟資料給ChartHub，ChartService上次已經建立過CreateVote()的方法了，所以不需要了再做一個，我們還需要一個GetVoteList來取得所有的投票資料。

VoteService.cs

public List<VoteModel> GetVoteList()
{
    return voteModelList;
}

接下來在ChartHub建立一個新增投票的方法CreateVote()用來建立新的投票，建立完成記得回傳給所有人更新現有的投票列表

ChartHub.cs

public async Task CreateVote(string voteName,string[] voteSelect)
{
    VoteModel voteModel = new VoteModel();
    voteModel.voteName = voteName;
    voteModel.creator = "Test";
    voteModel.startDate = DateTime.Now;
    Dictionary<string, int> _voteSelect = new Dictionary<string, int>();

    for (int i = 0; i < voteSelect.Length; i++)
    {
        _voteSelect.Add(voteSelect[i], 0);
    }

    voteModel.voteSelect = _voteSelect;
    _voteService.CreateVote(voteModel);

    await Clients.All.SendAsync("ReceiveVoteList", _voteService.GetVoteList());
}

signalR前端呼叫和接收

接下來只要呼叫方法丟資料及建立接收方法就行，送出的方法記得要放在按鈕裡

submit.addEventListener('click', function () {
    var voteName = document.getElementById('voteName');
    var voteSelList = new Array();
    var count = selCount.value;
    for (var i = 0; i < count; i++) {
        var sel = document.getElementById(`sel${i}`).value;
        voteSelList.push(sel);
    }

    connection.invoke("CreateVote", voteName.value, voteSelList).catch(function (err) {
        return console.error(err.toString());
    });

})

接收的方法我們上一篇有建立過，不過我們這邊要改一下，變數名稱改成ReceiveVoteList，換成下面的

1
2
3

connection.on("ReceiveVoteList", function (json) {
    console.log(json);
});

成功後會得到下面結果

最後我們做返回鍵的事件，讓它可以返回投票列表頁。

document.getElementById('cancelCreateVote').addEventListener('click',function(){
    voteForm.style.display = 'none';
    voteMenu.style.display = '';
})

今天先這樣，明天來完成列表頁面，然後再跟建立投票這頁整合。

範例下載

範例下載

[鐵人賽Day17] 實作一個即時投票系統 (2) - 使用signalR同步投票

Tue, 30 Oct 2018 19:43:35 +0800

今天要來把即時投票系統跟SignalR連線囉！

基本上跟塗鴉板也是差不多，但是投票系統應該需要自訂投票的選項和建立投票的種類，這個部份我們需要去設計物件來達成，難度會高一些，但今天還不會講就是，先把連線的處理準備好，明天再講這個部分。

後端的處理

後端我們需要建立3個東西VoteHub、VoteService、VoteModel

建立VoteModel

VotwModel用來當作一場投票的容器，大概需要投票編號、投票名稱、建立者、投票選項、投票數、開始時間、結束時間，大概這些，比較要注意的是投票選項和投票數 ，這2個是我們一開始無法確認數量為多少，名稱也不清楚，我想了想使用C# 的 Dictory來處理這部分最適合，因為本身是一個key值對應一個value，不會有重複選項建立的問題，要注意的大概就是這個，以下設計出來後大概的樣子。

using System;
using System.Collections.Generic;

namespace VoteWeb.Models
{
    public class VoteModel
    {
        public int id { get; set; }
        public string voteName { get; set; }
        public string creator { get; set; }
        public DateTime startDate { get; set; }
        public DateTime endDate { get; set; }
        public Dictionary<string, int> voteSelect { get; set; }
    }
}

建立VoteService

VoteServie跟上一個實作DrawServie不太一樣的地方是，我們需要多建立投票及新增投票選項的方法還有添加投票的方法，需要注意的是Dictory的泛型物件，他不能直接從直接從屬性修改，只能以陣列方式修改，請看下面範例註解的地方，還有我們建立一個Test投票方法CreateTestVote在裡面。

using System;
using System.Collections.Generic;
using VoteWeb.Models;

namespace VoteWeb.Services
{
    public class VoteService
    {
        private List<VoteModel> voteModelList;
        private int i = 0;
        public VoteService()
        {
            voteModelList = new List<VoteModel>();
            CreateTestVote();
        }
        // 建立測試用投票
        public void CreateTestVote(){
            VoteModel voteModel = new VoteModel();
            voteModel.id = 1;
            voteModel.voteName = "Test Vote";
            voteModel.creator = "me";
            voteModel.startDate = DateTime.Now;
            string[] voteSelect = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
            Dictionary<string, int> _voteSelect = new Dictionary<string, int>();
            for (int i = 0; i < voteSelect.Length; i++)
            {
                _voteSelect.Add(voteSelect[i], 0);
            }
            voteModel.voteSelect = _voteSelect;
            voteModelList.Add(voteModel);

        }

        // 取得投票Model
        public VoteModel GetVoteModel(string voteName)
        {
            for (int i = 0; i < voteModelList.Count; i++)
            {
                if (voteModelList[i].voteName == voteName)
                {
                    return voteModelList[i];
                }
            }

            return new VoteModel();
        }

        // 建立新的投票
        public void CreateVote(VoteModel voteModel)
        {
            i++;
            voteModel.id = i;
            voteModelList.Add(voteModel);
        }

        // 新增投票選項
        public void AddVoteSelect(string voteName, string selectName)
        {
            for (int i = 0; i < voteModelList.Count; i++)
            {
                if (voteModelList[i].voteName == voteName)
                {
                    voteModelList[i].voteSelect.Add(selectName, 0);
                }
            }
        }
        // 投票
        public void AddVoteSelectCount(string voteName, string selectName)
        {
            foreach (var voteModel in voteModelList)
            {
                if (voteModel.voteName == voteName)
                {
                    foreach (var voteSelect in voteModel.voteSelect)
                    {
                        if (voteSelect.Key == selectName)
                        {
                            voteModel.voteSelect[selectName] = voteSelect.Value + 1;
                            break;
                        }
                    }
                }
            }
        }

        // 反對票
        public void SubVoteSelectCount(string voteName, string selectName)
        {
            foreach (var voteModel in voteModelList)
            {
                if (voteModel.voteName == voteName)
                {
                    foreach (var voteSelect in voteModel.voteSelect)
                    {
                        if (voteSelect.Key == selectName)
                        {
                            voteModel.voteSelect[selectName] = voteSelect.Value - 1;
                            break;

                        }
                    }
                }
            }
        }
    }
}

建立VoteHub

先建立VoteHub.cs，Hub在建構子先接收VoteService，再建立取得投票內容，這個方法傳給自己就好，然後投票和反對票則是傳給所有人還有這2個接收的事件一樣就行，不需要特別寫2種。

using System;
using Microsoft.AspNetCore.SignalR;
using VoteWeb.Models;
using VoteWeb.Services;
using System.Threading.Tasks;
using System.Collections.Generic;

namespace VoteWeb.Hubs
{
    public class VoteHub : Hub
    {
        private VoteService _voteService;
        public VoteHub(VoteService voteService)
        {
            _voteService = voteService;
        }

        public async Task GetVote(string voteName)
        {
            await Clients.Caller.SendAsync("ReceiveVote", _voteService.GetVoteModel(voteName));
        }

        public async Task AddVoteSelectCount(string voteName, string voteSelect)
        {
            _voteService.AddVoteSelectCount(voteName, voteSelect);

            var temp =  _voteService.GetVoteModel(voteName);
            int count = 0;
            foreach (var _voteSelect in temp.voteSelect)
            {
                if (_voteSelect.Key == voteSelect)
                {
                    count = _voteSelect.Value;
                }
            } 

            await Clients.All.SendAsync("ReceiveVoteSelectCount", count, voteSelect);
        }
        public async Task SubVoteSelectCount(string voteName, string voteSelect)
        {
            _voteService.SubVoteSelectCount(voteName, voteSelect);

            var temp =  _voteService.GetVoteModel(voteName);
            int count = 0;
            foreach (var _voteSelect in temp.voteSelect)
            {
                if (_voteSelect.Key == voteSelect)
                {
                    count = _voteSelect.Value;
                }
            } 

            await Clients.All.SendAsync("ReceiveVoteSelectCount", count, voteSelect);
        }
    }
}

後端最後在Startup.cs引用Hub和Service

1
2

using VoteWeb.Hubs;
using VoteWeb.Services;

註冊VoteService和signalR router

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton<VoteService>();
    services.AddSignalR();
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseSignalR(routes =>
    {
        routes.MapHub<VoteHub>("/voteHub");
    });
    
    app.UseDefaultFiles();
    app.UseStaticFiles();
}

前端的部分

首先報表的Data拉出來做一個變數，所以chartData裡面的data改成這樣

var data = [];
var chartData = {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: data,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
}

再來建立基本的連線，記得SignalR JS函式庫也要引入，連接完成後取得投票資料GetVote，connection.on("ReceiveVote")接受到報表資料後，array.push()進變數內，完成後在開始畫出圖表。

var connection = new signalR.HubConnectionBuilder().withUrl("/voteHub").build();
var myChart;

// 連接事件
connection.start()
.then(function () {
    connection.invoke("GetVote", 'Test Vote').catch(function (err) {
        return console.error(err.toString());
    });
})
.catch(function (err) {
    return console.error(err.toString());
});

connection.on("ReceiveVote", function (json) {

    data.push(json.voteSelect.red);
    data.push(json.voteSelect.blue);
    data.push(json.voteSelect.yellow);
    data.push(json.voteSelect.green);
    data.push(json.voteSelect.purple);
    data.push(json.voteSelect.orange);

    myChart = new Chart(ctx, chartData);

});

建立投票及反對票的函數，接收回來由於data只是一個陣列，這時就要利用label的資料來搜尋是在哪個位置，使用indexOf就行了！

function AddVoteSelect(voteSelect) {
    connection.invoke("AddVoteSelectCount", 'Test Vote', voteSelect).catch(function (err) {
        return console.error(err.toString());
    });
}

function SubVoteSelect(voteSelect) {
    connection.invoke("SubVoteSelectCount", 'Test Vote', voteSelect).catch(function (err) {
        return console.error(err.toString());
    });
}
connection.on("ReceiveVoteSelectCount", function (json, voteSelect) {
    var index = chartData.data.labels.indexOf(voteSelect);
    chartData.data.datasets[0].data[index] = json;
    myChart.update();

});

最後在修改按鈕事件就大功告成！

red.onclick = function () {
    AddVoteSelect('Red');
}
blue.onclick = function () {
    AddVoteSelect('Blue');
}
yellow.onclick = function () {
    AddVoteSelect('Yellow');
}
green.onclick = function () {
    AddVoteSelect('Green');
}
purple.onclick = function () {
    AddVoteSelect('Purple');
}
orange.onclick = function () {
    AddVoteSelect('Orange');
}

// 反對票事件
red2.onclick = function () {
    SubVoteSelect('Red');
}
blue2.onclick = function () {
    SubVoteSelect('Blue');
}
yellow2.onclick = function () {
    SubVoteSelect('Yellow');
}
green2.onclick = function () {
    SubVoteSelect('Green');
}
purple2.onclick = function () {
    SubVoteSelect('Purple');
}
orange2.onclick = function () {
    SubVoteSelect('Orange');
}

還有記得安裝前端signal套件就完成啦！

忘記的往回看Day3啊！XD

DEMO

範例下載

範例下載

[鐵人賽Day16] 實作一個即時投票系統 (1) - 投票介面建置

Mon, 29 Oct 2018 19:37:26 +0800

今天我們要來實作一個即時投票系統，前端的圖表呈現部分，我們要依賴Chart.js這個JS函式庫，所以今天就先來帶大家瞭解一下Chart.js大概的使用方法。首先創立一個新專案

`1`	`dotnet new web -o VoteWeb`

Signal套件該裝的弄好，忘記的回去看Day3

安裝Chart.js

CDN引入

`1`	`<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>`

或NPM安裝

`1`	`$ npm install chart.js --save`

使用Chart.js

由於Chart.js是使用Canvas元素來畫報表的，所以先建立一個Canvas

`1`	`<canvas id="myChart"></canvas>`

開始繪製圖表

Chart.js的繪圖，只要照官方給定的格式，丟進Chart物件中，Chart.js就會幫我們畫出來，然後我們把官方給的範例套進去，物件格式大概像下面這樣

var chartData =
{
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
}

大概介紹一下功能

type：圖表的種類
dataset：圖表資料，是一個array
- labels：圖表的標籤
- data：資料數值，資料是一個array
- backgroundColor：背景色，array對應上面的data
- borderColor：線條顏色，array也是對應上面的data
- borderWidth：線條寬度
options：圖表設定

然後我們照官方範例做一遍，只要呼叫出Chart.js物件，把Canvas和資料塞進去就行。

1
2

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, chartData);

註：記得new Chart要放在chartData下面

這時候執行應該就能看到圖表了，但是大小卻是充滿整個瀏覽器，所以我們要再Canvas外面包一個<div>元素，再給他長寬限制

<style>
    .canvas {
        width:500px;
    }
</style>
<div class="canvas">
    <canvas id="myChart"></canvas>
</div>

註：我發現限制height沒有作用，所以限制width就好

使用Chart.js API

接下來我們要讓圖表重新繪製，修改資料的方式有2種，一種是把資料放在一個變數裡修改，或是直接呼叫Chart.js物件，進到物件變數裡修改，之後再使用API的.update()重繪，圖表這時就會整個重新繪製。

首先我們要做一些投票的按鈕，投票和反對票分開2種按鈕

<div>
    <button id="red" type="button">Red +</button>
    <button id="blue" type="button">Blue +</button>
    <button id="yellow" type="button">Yellow +</button>
    <button id="green" type="button">Green +</button>
    <button id="purple" type="button">Purple +</button>
    <button id="orange" type="button">Orange +</button>
</div>
<div>
    <button id="red2" type="button">Red -</button>
    <button id="blue2" type="button">Blue -</button>
    <button id="yellow2" type="button">Yellow -</button>
    <button id="green2" type="button">Green -</button>
    <button id="purple2" type="button">Purple -</button>
    <button id="orange2" type="button">Orange -</button>
</div>

JS載入DOM元素

// 投票按鈕
var red = document.getElementById('red');
var blue = document.getElementById('blue');
var yellow = document.getElementById('yellow');
var green = document.getElementById('green');
var purple = document.getElementById('purple');
var orange = document.getElementById('orange');
// 反對票按鈕
var red2 = document.getElementById('red2');
var blue2 = document.getElementById('blue2');
var yellow2 = document.getElementById('yellow2');
var green2 = document.getElementById('green2');
var purple2 = document.getElementById('purple2');
var orange2 = document.getElementById('orange2');

再來建立投票事件，只要將數值+1，再把update()就行了，反對票則是倒過來。

// 投票事件
red.onclick = function(){
    chartData.data.datasets[0].data[0]++;
    myChart.update();
}
blue.onclick = function(){
    chartData.data.datasets[0].data[1]++;
    myChart.update();
}
yellow.onclick = function(){
    chartData.data.datasets[0].data[2]++;
    myChart.update();
}
green.onclick = function(){
    chartData.data.datasets[0].data[3]++;
    myChart.update();
}
purple.onclick = function(){
    chartData.data.datasets[0].data[4]++;
    myChart.update();
}
orange.onclick = function(){
    chartData.data.datasets[0].data[5]++;
    myChart.update();
}

// 反對票事件
red2.onclick = function(){
    chartData.data.datasets[0].data[0]--;
    myChart.update();
}
blue2.onclick = function(){
    chartData.data.datasets[0].data[1]--;
    myChart.update();
}
yellow2.onclick = function(){
    chartData.data.datasets[0].data[2]--;
    myChart.update();
}
green2.onclick = function(){
    chartData.data.datasets[0].data[3]--;
    myChart.update();
}
purple2.onclick = function(){
    chartData.data.datasets[0].data[4]--;
    myChart.update();
}
orange2.onclick = function(){
    chartData.data.datasets[0].data[5]--;
    myChart.update();
}

這樣大概就完成了，下一篇就是SignalR的連接了。

DEMO

其實Chart.js大部分的教學都是一次畫出，所以這篇我也是花了點時間做了點小測試，結果跟我想的一樣是可行的，可以邊改資料邊重繪圖表，那麼下一篇就開始與Signal做連線吧！！

參考 & 範例下載

[鐵人賽Day15] 實作一個共用塗鴉牆 (4) - 載入時同步

Sun, 28 Oct 2018 09:31:57 +0800

今天應該最後一篇塗鴉牆了，來講講畫版載入時同步的功能，在載入時必須和前面畫過的畫面同步，避免之後進來的人看到的畫面跟先進來看到會有不一樣的狀況，所以我們得做一個方法，在載入時就把存起來的動作一次畫完。

同步不同時間連線的塗鴉板

我們可以回想一下Day11的Service寫法，其實寫法一樣的，比耗工應該是前端部分，需要把一次把大量的動作畫完

建立DrawService.cs

這次比上次簡單，我們不需要移除的方法，只要增加就好，但是還要新增一個方法取得list。

using System;
using System.Collections.Generic;
using DrawWall.Models;

namespace DrawWall.Service
{
    public class DrawService
    {
        private List<DrawModel> _list;
        public DrawService()
        {
            _list = new List<DrawModel>();
        }
        public void AddList(DrawModel drawModel)
        {
            _list.Add(drawModel);
        }
        public List<DrawModel> GetList()
        {
            return _list;
        }
    }
}

在Starup.cs的Service裡引用和註冊

using DrawWall.Service;
namespace DrawWall
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddSignalR();
            services.AddSingleton<DrawService>();
        }
    }
}

修改DrawHub內容

注入到Hub建構子內，然後我們新增一個方法GetDraw來取得所有的的繪圖過程，還有一個地方要注意，不要傳給所有人，只要傳給呼叫的使用者即可，SendDraw要把Json資料存進drawService中。

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
using DrawWall.Models;
using DrawWall.Service;
using System.Collections.Generic;

namespace DrawWall.Hubs
{
    public class DrawHub : Hub
    {
        public DrawService _drawService;
        public DrawHub(DrawService drawService)
        {
            _drawService = drawService;
        }
        public async Task SendDraw(DrawModel drawModel)
        {
            _drawService.AddList(drawModel);
            await Clients.All.SendAsync("ReceiveDraw", drawModel);
        }
        public async Task GetDraw()
        {
            await Clients.Caller.SendAsync("ReciveAllDraw", _drawService.GetList());
        }
        
    }
}

前端連線時重繪

前端部分我們連接成功時，呼叫GetDraw方法，並把取得的資料全部重繪一遍

connection.start().then(function () {
    connection.invoke('GetDraw').catch(function (err) {
        console.log(err);
    });

}).catch(function (err) {
    return console.error(err.toString());
});

connection.on("ReciveAllDraw", function (json) {
    console.log(json);
    for (var i = 0; i < json.length; i++) {
        switch (json[i].mode) {
            case 'line':
                ctx.strokeStyle = json[i].color;
                ctx.lineWidth = json[i].lineWidth;
                ctx.beginPath();
                ctx.moveTo(json[i].startPos[0], json[i].startPos[1]);
                ctx.lineTo(json[i].endPos[0], json[i].endPos[1])
                ctx.closePath();
                ctx.stroke();
                break;
            case 'eraser':
                var _eraserWidth = json[i].eraserWidth;
                ctx.clearRect(json[i].startPos[0] - (_eraserWidth / 2), json[i].startPos[1] - (_eraserWidth / 2), _eraserWidth, _eraserWidth);
                break;
        }
    }
});

這樣就完成囉！

DEMO

塗鴉版未完成事項及用途

不過今天這篇有點短，不過文章開頭說最後一篇了，所以我們來聊聊我們還能做些什麼

UI重新設計，這個很重要，好的UX才會讓使用者想用下去
把剩下Cavans的繪圖API都做成工具，當然繪圖不能只有普通的直線和橡皮擦囉!
加入連線名單及畫圖時的使用者名稱，要知道到底是誰在畫
增加繪圖板轉圖片功能，這樣就不需要刻意使用什麼截圖軟體

至於用途，我覺得可以用在網路會議時，有些東西要打字的不方便理解，這時塗鴉板就派上用場囉！可能是會寫溝通的UML或是流程圖之類，等於會議時常常用到的白板一樣。

今天大概就這些，明天就進入下一個實作了囉~

範例下載

[鐵人賽Day14] 實作一個共用塗鴉牆 (3) - 新增橡皮擦功能

Sat, 27 Oct 2018 10:31:00 +0800

今天我們要幫塗鴉牆加上橡皮擦的功能，只能畫不能擦掉感覺真的是蠻奇怪的，當然擦的時候也要同時擦全部的畫版。

橡皮擦功能

這邊我在實作時，一開始是想到只有用透明色或是白色把畫過的地方重新上色就行，後來發現有Canvas有內建API可以達成。

使用clearRect()來做橡皮擦功能

clearRact可以設定一個矩形範圍來取消畫過的元素，先來看看定義

`1`	`clearRact(x, y , width, height)`

x：清除x軸位置
y：清除y軸位置
width：清除寬度
height：清除高度

先建立使用的Html element，一個checkbox切換畫筆或橡皮擦，一個select控制橡皮擦長寬，這部分加在畫筆粗細後方

橡皮擦：<input id="eraser" type="checkbox">
橡皮擦範圍：
<select id="eraserWidth">
    <option>5</option>
    <option>10</option>
</select>

JS載入設定要素

1
2

var eraser = document.getElementById('eraser');
var eraserWidth = document.getElementById('eraserWidth');

然後我們要修改一下mousermove的設定，在橡皮擦啟動時，是要擦掉而不是畫圖

canvas.addEventListener('mousemove', function (e) {
    if (draw) {
        var newPos = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];
        // 判斷橡皮擦是否啟用
        if (eraser.checked) {
            var _eraserWidth = eraserWidth.value;
            ctx.clearRect(tempPos[0] - (_eraserWidth / 2), tempPos[1] - (_eraserWidth / 2), _eraserWidth, _eraserWidth);
        } else {
            ctx.beginPath();
            ctx.moveTo(tempPos[0], tempPos[1]);
            ctx.lineTo(newPos[0], newPos[1])
            ctx.closePath();
            ctx.stroke();
            connection.invoke("SendDraw", {
                "startPos": tempPos,
                "endPos": newPos,
                "color": ctx.strokeStyle,
                "lineWidth": ctx.lineWidth

            }).catch(function (err) {
                return console.error(err.toString());
            });
        }
        tempPos = newPos;
    }
});

x和y扣掉寬度除2是為了讓範圍中心對到點擊位置上，因為我覺得這樣會比較抓距離，還有記得跟Draw一樣的動作要拉出來。

同步到SignalR

首先我們的JSON格式需要更新下，我們多加一個mode和eraserWidth，mode用來辨認到底是畫筆還是橡皮擦，其實也能寫成isEraser或isPen也行，但是Canvas其實還有很多其他功能，像是畫矩形、三角形、圓形、貝茲曲線…..，所以我們要讓他可以變化大一點，用Mode來做這變數名會比較適合。

{
    "mode": "line",
    "startPos": [10, 20],
    "endPos": [40, 50]],
    "color": "orange",
    "lineWidth": 10,
    "eraserWidth": 5       
}

然後一樣在mousemove時傳回Server

canvas.addEventListener('mousemove', function (e) {
    if (draw) {
        var newPos = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];
        // 判斷橡皮擦是否啟用
        if (eraser.checked) {
            var _eraserWidth = eraserWidth.value;
            ctx.clearRect(tempPos[0] - (_eraserWidth / 2), tempPos[1] - (_eraserWidth / 2), _eraserWidth, _eraserWidth);
        } else {
            ctx.beginPath();
            ctx.moveTo(tempPos[0], tempPos[1]);
            ctx.lineTo(newPos[0], newPos[1])
            ctx.closePath();
            ctx.stroke();
        }
        // 回傳動作
        connection.invoke("SendDraw", {
                "mode": eraser.checked?'eraser':'line',
                "startPos": tempPos,
                "endPos": newPos,
                "color": ctx.strokeStyle,
                "lineWidth": ctx.lineWidth,
                "eraserWidth": eraserWidth.value
            }).catch(function (err) {
                return console.error(err.toString());
            });

        tempPos = newPos;
    }
});

接收事件ReceiveDraw我們需要加上一個switch來判定mode是什麼，在做不一樣的事情

connection.on("ReceiveDraw", function (json) {
    switch (json.mode) {
        case 'line':
            ctx.strokeStyle = json.color;
            ctx.lineWidth = json.lineWidth;
            ctx.beginPath();
            ctx.moveTo(json.startPos[0], json.startPos[1]);
            ctx.lineTo(json.endPos[0], json.endPos[1])
            ctx.closePath();
            ctx.stroke();
            break;
        case 'eraser':
            var _eraserWidth = json.eraserWidth;
            ctx.clearRect(json.startPos[0] - (_eraserWidth / 2), json.startPos[1] - (_eraserWidth / 2), _eraserWidth, _eraserWidth);
            break;
    }

});

後端部分只需要更新DrawModel.cs的屬性就行了

public class DrawModel
{
    public string mode { get; set; }
    public int[] startPos { get; set; }
    public int[] endPos { get; set; }
    public string color { get; set; }
    public int lineWidth { get; set; }
    public int eraserWidth { get; set; }
}

到這邊就完成啦！

DEMO

範例下載

範例下載

[鐵人賽Day13] 實作一個共用塗鴉牆 (2) - signal同步畫板

Fri, 26 Oct 2018 10:52:26 +0800

今天要來做塗鴉牆第2部分，首先我們得想想該回傳些什麼，制定一個Json格式回傳回去。

前端部分

連接部分程式碼先寫好

var connection = new signalR.HubConnectionBuilder().withUrl("/drawHub").build();
// 連接事件
connection.start().catch(function (err) {
    return console.error(err.toString());
});

再來我們要制定一下回傳的Json格式

制定回傳Json格式

從昨天的程式碼來看，我們需要起始位置、結束位置、顏色、線條粗細，大概像下面這樣。

{
    "startPos": [10, 20],
    "endPos": [40, 50]],
    "color": "orange",
    "lineWidth": 10       
}

在mousermove時回傳資料給Server

每次畫線時都要回傳給Sever，所以要寫在mousermove裡面，回傳格式使用上面的Json格式

connection.invoke("SendDraw", {
    "startPos": tempPos,
    "endPos": newPos,
    "color": ctx.strokeStyle,
    "lineWidth": ctx.lineWidth

}).catch(function (err) {
    return console.error(err.toString());
});

註：記得要寫在tempPos = newPos;之前，不然更新tempPos之後就不知道前一個位置了

接收事件則是接收後直接在Canvas上畫圖，也就是重複了mousemove裡面做的動作

connection.on("ReceiveDraw", function (json) {
    ctx.strokeStyle = json.color;
    ctx.lineWidth = json.lineWidth;
    ctx.beginPath();
    ctx.moveTo(json.startPos[0], json.startPos[1]);
    ctx.lineTo(json.endPos[0], json.endPos[1])
    ctx.closePath();
    ctx.stroke();
});

後端部分

我們先建立一個Models資料夾，裡面要用來裝我們建立的Json格式

建立DrawModel容器

在Models建立一個檔案DrawModel，用來裝Json格式

using System;

namespace DrawWall.Models
{
    public class DrawModel
    {
        public int[] startPos { get; set;}
        public int[] endPos { get; set;}
        public string color { get; set;}
        public int lineWidth { get; set;}
    }
}

注意startPos和endPos是數字陣列

建立DrawHub

在建立一個DrawHub，內容很簡單也只要把接受到的Json資料再傳給所有人就行

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
using DrawWall.Models;

namespace DrawWall.Hubs
{
    public class DrawHub : Hub
    {
        public async Task SendDraw(DrawModel drawData)
        {
            await Clients.All.SendAsync("ReceiveDraw", drawData);
        }
    }
}

還有Starup.cs記得註冊DrawHub和SignalR

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseDefaultFiles();
    app.UseStaticFiles();
    app.UseSignalR(routes =>
    {
        routes.MapHub<DrawHub>("/drawHub");
    });            
}

最後記得加入前端的signal套件，這樣就完成了

Demo

範例下載

範例下載

[鐵人賽Day12] 實作一個共用塗鴉牆 (1) - 前端塗鴉板製作

Thu, 25 Oct 2018 20:05:47 +0800

今天我們來實作一個共用塗鴉牆，其實之前看到Canvas的應用一直想玩玩看，但是一直都沒時間玩，剛好這次SignalR實作可以用到!XD 這次實作拆成2部分，一部分是塗鴉的實作，第二天在做SignalR的部分。

塗鴉牆實作

首先我們先在index.html建立一個Canvas元素，style給個外框，不然搞不清楚範圍在哪！

`1`	`<canvas id="draw" width="800" height="600" style="border:2px solid gray"></canvas>`

建立使用的變數

var canvas = document.getElementById('draw'); // 取得畫布元素
var ctx = canvas.getContext('2d'); // 使用2D繪圖
var draw = false; // 是否要繪圖
var tempPos = [0, 0]; // 繪圖起始位置

畫圖事件

畫圖的流程就是在模擬畫圖的動作，建立3個監聽事件，mousedown代表畫筆畫下去，mousemove代表畫筆移動，mouseup畫筆拿起來(停止繪圖的意思)，建立一個draw變數就是用來來偵測畫筆是否再紙上。

canvas.addEventListener('mousedown', function(e){
    draw = true;
});

canvas.addEventListener('mousemove', function(e){
    if(draw){

    }
});

canvas.addEventListener('mouseup', function(){
    draw = false;
});

mousedown開始時，我們要把開始的位置用nowPos記錄下來

canvas.addEventListener('mousedown', function(e){
    draw = true;
    tempPos = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];
});

mousemove發現draw為true，代表畫筆在紙上，所以就開始繪畫

canvas.addEventListener('mousemove', function(e){
    if(draw){
        var newPos = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop]; // 取得結束的位置
        ctx.beginPath(); // 開始繪畫取得路徑
        ctx.moveTo(tempPos[0], tempPos[1]); // 移動到起始位置
        ctx.lineTo(newPos[0], newPos[1]); // 畫線到結束的位置
        ctx.closePath(); // 關閉繪畫的路徑
        ctx.stroke(); // 畫線
        tempPos = newPos; // 記錄下最後的位置為目前的位置
    }
});

畫筆設定

只有這樣感覺好像太單調，所以我們在加入顏色和線條粗細，在Canvas上面加入2項設定html element

<div>
    顏色：<input id="color" type="color">
    粗細：
    <select id="lineWidth">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
    </select>
</div>

開始畫時讓Canvas載入選擇的設定，strokeStyle為畫筆顏色，lineWidth為線條粗細。

var color = document.getElementById('color');
var lineWidth = document.getElementById('lineWidth');
ctx.strokeStyle = color.value;
ctx.lineWidth = lineWidth.value;

設定2個設定選項的監聽事件，讓選項改變時讓Canvas從新載入設定

color.addEventListener('input', function(){
    ctx.strokeStyle = color.value;
})

lineWidth.addEventListener('input', function(){
    ctx.lineWidth = lineWidth.value;
})

DEMO

這樣就成功做成一個簡單的塗鴉牆了，明天再來繼續做剩下的SignalR的部分。

參考 & 範例下載

[鐵人賽Day11] 實作一個連線名單

Wed, 24 Oct 2018 19:30:46 +0800

今天要來個小型的實作一個連線名單，連線名單可以讓你知道目前在線的人有誰(廢話)，之前的範例都是在進入時傳送訊息給所有人，如果是中途進來的人，是無從得知目前有哪些人在線上，如果要做一個聊天室沒這基本的功能也太爛了吧!XD

一樣使用Day3的範例來做，沒有的點這裡

製作一個名單容器和容器Service

我們先要製作一個容器，把目前上線的人資訊都存下來，至於要存哪些呢?我覺得使用者名稱和連接ID是一定需要的，再來就是上線的時間點，大概就這些，先建立一個ConUserModel.cs，並建立一個Class當容器。

using System;
using System.Collections.Generic;

namespace CoreWeb.Models
{
    public class ConUserModel
    {
        public string connectID { get; set; }
        public string username { get; set; }
        public DateTime onlineTime { get; set; }
    }
}

再來建立ConUserService，這邊我建立在同一個檔案內，在內部建立一個List泛型內部裝剛剛建立的ConUserModel，建立新增及移除List的方法

public class ConUserService
{
    private List<ConUserModel> _list;
    public ConUserService()
    {
        _list = new List<ConUserModel>();
    }
    public List<ConUserModel> AddList(ConUserModel user)
    {
        _list.Add(user);
        return _list;
    }
    public List<ConUserModel> RemoveList(string connectID)
    {
        for (int i = 0; i < _list.Count; i++)
        {
            if (_list[i].connectID == connectID)
                _list.Remove(_list[i]);
        }
        return _list;
    }
}

再到Starp.cs註冊Service

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton<ConUserService>();
    services.AddSignalR();
}

再來到我們建立一個Hub裡面引用Core.Models

`1`	`using CoreWeb.Models;`

Hub內宣告List<ConUserMode>，建構子裡面接收從Servie傳過來的List<ConUserMode>，在載入到Hub內的List變數

namespace CoreWeb.Hubs
{
    public class ChatHub : Hub
    {
        private ConUserService conUserList;
        public ChatHub(ConUserService conUserService)
        {
            conUserList = conUserService;
        }
    }
}

後端連線斷線的處理

後端每當有人連線或斷線時，都要重新傳送一份名單給所有使用者，所以得要在OnConnectedAsync和OnDisconnectedAsync處理，但是OnConnectedAsync裡面不能接參數，所以我們改用連線後，再加入的群組的方式，首先寫加入群組的方法，群組假設叫TestGroup

public async void AddConUserList(string user)
{
    var _user = new ConUserModel();
    _user.username = user;
    _user.connectID = Context.ConnectionId;
    _user.onlineTime = DateTime.Now;

    await Groups.AddToGroupAsync(Context.ConnectionId, "TestGroup");
    await Clients.Group("TestGroup").SendAsync("GetConList", conUserList.AddList(_user));
}

程式碼大概就是建立一個ConUserModel相關資料塞進去，加入群組後再加入上線名單。然後切斷連線時，要通知群組所有人更新連線名單

public override async Task OnDisconnectedAsync(Exception exception)
{
    await base.OnDisconnectedAsync(exception);
    await Clients.Group("TestGroup").SendAsync("GetConList", conUserList.RemoveList(Context.ConnectionId));
}

前端表現處理

我們先建立一個連線名單的select html element，記得加入multiple屬性讓它展開

`1`	`<select id="ConList" multiple></select>`

在連線的方法成功之後加入群組

document.getElementById('conOpenBtn').onclick = function () {
    connection.start().then(function() {
        console.log('start');

        var user = document.getElementById("name").value;
        // 加入群組
        connection.invoke("AddConUserList", user).catch(function (err) {
            return console.error(err.toString());
        });

    }).catch(function (err) {
        return console.error(err.toString());
    });
}

更新名單的方法每次都要清空List，再重新填入Server傳回來的名單

connection.on("GetConList", function (ConList) {
    console.log(ConList);
    _ConList.innerHTML = '';

    for (var i = 0; i < ConList.length; i++) {
        var user = document.createElement("option");
        user.text = ConList[i].username;
        _ConList.appendChild(user);
    }
})

DEMO

今天大概就這些，雖然它只是一個小組件，但是之後的實作都能套用到它，明天會會來個比較難一點的。

範例下載

今天範例

[鐵人賽Day10] SignalR 組態設定

Tue, 23 Oct 2018 19:06:44 +0800

先來碎碎念一下，昨天gitpage一直有問題，害我git push好幾次，後來發現repo裡的文件是新的沒錯，今天一看又好了，真是的浪費我快30分鐘

今天來講講SignalR的組態設定，組態有分Server組態和用戶組態2種，就來看看怎麼設定吧！

Server組態設定

主要在Starup.cs裡面設定，可以對全部Hub設定，也能只對一個Hub設定。

全部Hub設定

services.AddSignalR(options =>
{
    options.HandshakeTimeout = TimeSpan.FromMinutes(3);
    options.KeepAliveInterval = TimeSpan.FromHours(1);
    options.EnableDetailedErrors = true;
});

單一Hub設定

services.AddSignalR().AddHubOptions<ChatHub>(options =>
{
    options.HandshakeTimeout = TimeSpan.FromMinutes(3);
    options.KeepAliveInterval = TimeSpan.FromHours(1);
    options.EnableDetailedErrors = true;
});

可設定變數

名稱	解釋
HandshakeTimeout	初次建立連線的時間，超過時間User端都沒回應會建立連線失敗，其實這命名正是WebSocket的握手，時間使用`TimeSpan`設定
KeepAliveInterval	無傳送訊息持，會ping Server以保持連線的時間，一樣使用`TimeSapn`設定
EnableDetailedErrors	是否顯示錯誤詳細狀況，預設是false，建議只有開發時打開就好

傳輸和記憶體緩衝相關設定

這邊文件寫得不太清楚，文件只說設定會傳到委派MapHub，後來實際做時發現MapHub原來有2個變數，一個就是傳入HttpConnectionDispatcherOptions的設定，設定方法一樣是Starup.cs裡面，大概像下面這樣

routes.MapHub<ChatHub>("/chatHub", options =>
{
    options.WebSockets.CloseTimeout = TimeSpan.FromMilliseconds(500);
    options.ApplicationMaxBufferSize = 0;
    options.TransportMaxBufferSize = 0;
}

選項很多請看結尾的的官方文件

用戶端組態設定

在用戶端部分有分成.NET和JS2種，.NET版文件在MSDN文件是用WPF當範例，因為他不跨平台，所以這邊先不介紹。

JS用戶端

設定方式是在建立後的HubConnection，在物件屬性中直接設定，例如像下面這段程式碼。

1
2
3

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

connection.serverTimeoutInMilliseconds = 500; // 設定500毫秒無回應，切斷連線

或是從一開始建立就設定好也行

var connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub", {
        serverTimeoutInMilliseconds: 500
    })
    .build();

可以設定的選項如下

名稱	解釋
serverTimeoutInMilliseconds	連線無回應的時間限制
accessTokenFactory	驗證用的Bearer Token
skipNegotiation	跳過交涉的步驟，只支援WebSocket傳輸時

註：.NET用戶端可以設定很多，不知為什麼JS用戶端只有3個…

今天大概這些啦，MSDN文件感覺很多寫的太簡單，而且又是機器翻譯，實在是看不太懂….

無聊的概念大概都講完了，明天就要開始實作吧！！

參考

MSDN文件

[鐵人賽Day7] SignalR 群組概念與使用

Sat, 20 Oct 2018 12:03:55 +0800

今天來介紹群組的運作，不知道會不會有人問為什麼要群組？？總不能每次訊息都傳給所有人吧!XD

所以今天就讓我們好好來介紹一下SignalR群組運作的方式。

使用方法

主要就使用3個方法，Groups.AddToGroupAsync()、RemoveFromGroupAsync()、Clients.Group()3種。

加入群組使用

`1`	`Groups.AddToGroupAsync(Context.ConnectionId, groupName);`

退出群組使用

`1`	`Groups.RemoveFromGroupAsync(Context.ConnectionId, groupName);`

Context.ConnectionId為前端SignalR產生的ID
groupName為要加入的群組

群組傳送訊息使用Clients.Group()

`1`	`Clients.Group(groupName).SendAsync("SendGroupMethod", "GroupMessage");`

groupName是要傳送得群組 SendAsync()第一個參數為回傳要呼叫的前端方法，可任意修改名稱，第二個參數為回傳的訊息。

大概就這樣，感覺好像沒講什麼….. 那帶大家來實做一下吧!!

群組實作

我們用Day3得實作為基礎繼續做下去，如果沒做到的可以往回看Day3。

後端部分

首先我們在Hub新增方法AddGroup()，用來加入群組使用，內容大概像下面這樣

public async Task AddGroup(string groupName, string username)
{
    await Groups.AddToGroupAsync(Context.ConnectionId, groupName);
    await Clients.Group(groupName).SendAsync("RecAddGroupMsg", $"{username} 已加入 群組：{groupName}。");
}

AddToGroupAsync()加入群組後，再回傳一個群組訊息告知大家誰加入了群組。

在建立一個群組傳送訊息的方法SendMessageToGroup()

public Task SendMessageToGroup(string groupName, string username, string message)
{
    return Clients.Group(groupName).SendAsync("ReceiveGroupMessage", groupName, username, message);
}

跟上面的方法大同小異，只是多個訊息變數，還有傳回去時要多傳一個使用者，讓大家知道是誰傳的。

前端部分

首先我們要創建一個群組列表和加入群組按鈕，讓大家選擇要加入哪一個群組，群組就用很多人喜歡的貓派和狗派來當示範。

<select id="group">
    <option>貓派</option>
    <option>狗派</option>
</select>
<button type="button" id="addGroupBtn">加入群組</button>
<br>
姓名：<input id="name" type="text"><br>
訊息<input id="msg" type="text">
<br>
<button type="Button" id="submitGroupBtn">送出給群組</button>
<button type="Button" id="submitAllBtn">送出給所有人</button>    
<br>
<div id="msgDiv"></div>

建立加入群組的事件到ButtonClick裡，然後傳回給AddGroup

document.getElementById("addGroupBtn").addEventListener("click", function (event) {
    var user = document.getElementById("name").value;
    var group = document.getElementById("group").value;
    connection.invoke("AddGroup",group, user ).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

建立接收的事件，用來接收群組是否加入成功

connection.on("RecAddGroupMsg", function (message) {
    var msg = message;
    var li = document.createElement("li");
    li.textContent = msg;
    document.getElementById("msgDiv").appendChild(li);
});

再來建立群組訊息事件和接收事件，顯示的訊息我們可以顯示是群組還是所有人，所以我們連原本的訊息格式也改一下吧！

// 群組訊息Button事件
document.getElementById("submitGroupBtn").addEventListener("click", function (e) {
    var user = document.getElementById("name").value;
    var group = document.getElementById("group").value;
    var message = document.getElementById("msg").value;

    connection.invoke("SendMessageToGroup",group, user, message ).catch(function (err) {
        return console.error(err.toString());
    });
});

// 群組訊息接收事件
connection.on("ReceiveGroupMessage", function (groupName, user, message) {
    var msg = `[群組訊息(${groupName})]${user}：${msg}`;
    var li = document.createElement("li");
    li.textContent = msg;
    document.getElementById("msgDiv").appendChild(li);
});

// 全頻道訊息訊息事件
connection.on("ReceiveMessage", function (user, message) {
    var msg = `[全頻道訊息(${groupName})]${user}：${msg}`;
    var li = document.createElement("li");
    li.textContent = msg;
    document.getElementById("msgDiv").appendChild(li);
});

這樣就大功告成了！

DEMO

參考 & 範例下載

[鐵人賽Day6] SignalR 前端API運用

Fri, 19 Oct 2018 14:43:05 +0800

連接事件

建立連線，我們需要建立一個連線物件，withUrl(Hub)裡的參數放入要連接的Hub名稱，再用build()建立連線物件。

`1`	`var connection = new signalR.HubConnectionBuilder().withUrl("/Hub名稱").build();`

註：Hub名稱不分大小寫

開始連接

使用connection.start()方法開始連接Server，連接錯誤時可用catch()捕捉錯誤

connection.start()
.then(function(){
    // 連接成功後要做的事情
})
.catch(function(err){
    // 錯誤處理
});

關閉連接

使用connection.stop()方法開始連接Server，一樣錯誤時可用catch()捕捉錯誤

1
2
3

connection.stop().catch(function(err){
    // 錯誤處理
});

connection.onclose()可以監聽連接關閉瞬間

1
2
3

connection.onclose(function(e){
    // 關閉時想做的事
});

自訂事件

除了連接和關閉事件比較特別之外，其他事件都是自己自訂的事件，當然大部分的基本動作都能呼叫SignalR API不需要全部自己實作。

建立自訂事件

大致流程像這樣，首先使用Connection.invoke()呼叫Hub的方法，這時Hub會依照SendAsync()寫的對象傳回去給connection.on()接收，我們以SendMessage為例，JS像下面這樣寫

1
2
3

connection.invoke("SendMessage", user, message).catch(function (err) {
    return console.error(err.toString());
});

invoke的第一個變數會呼應到Hub的方法名稱，所以上面那樣會呼叫到下面這個Hub裡的方法

public async Task SendMessage(string user, string message)
{
    await Clients.All.SendAsync("ReceiveMessage", user, message);
}

然後Clients.All.SendAsync.SendAsync()第一個變數會丟回conection.on()事件裡。

1
2
3

connection.on("ReceiveMessage", function (user, message) {
    // 接收後要做的事
});

註：這3個方法除了第一個變數是對象外，其他變數都是能自訂的資料，數量也沒有限制

流程圖

看不懂沒關係，我還多畫了流程圖，這樣應該會比較好了解

到這邊已經把SignalR的基礎運作都說完了，下一篇我們來講講群組的運作。

參考

MSDN文件

JS - 步驟紀錄器實作

Sat, 08 Sep 2018 21:12:17 +0800

前言

昨天有人問了一題有趣的題目，內容是問要怎麼實作編輯器得上一步下一步動作，也是就是說要做一個步驟紀錄器，覺得沒做過這種東西覺得好像蠻有趣的，就來試試看。

步驟紀錄器原理

基本原理

原理很簡單，先建立一個Array當作容器，每次輸入時使用就把資料塞進Array中，在使用一個變數紀錄當前的步驟，上一步就是把資料還原上一個Array元素的內容而已，是不是很簡單呢？XD

紀錄的頻率

HTML的DOM事件只能監控你每次輸入的瞬間，假如說你輸入123，這樣會產生3步，這樣感覺紀錄的太細膩，所以我們要做一個延遲，需要輸入後停止多久的時間，紀錄器才會把資料記錄下來。

紀錄器的空間控管

當然紀錄器的空間要有限制，不是一直Array.push()就好，這樣你會害使用者記憶體爆掉的….

所以我們一定要限制Array的大小，對使用者來說就是可以紀錄的幾個步驟。

步驟紀錄器實作

建立基本容器與變數

實作使用TextArea來當示範，首先先建立2個Button和TextArray

1
2
3

<button id="prev" type="button">上一步</button>
<button id="next" type="button">下一步</button>
<textarea id="text" cols="5"></textarea>

建立Array和使用的變數

var step = 0; // 步驟變數
var textList = new Array(); // array容器
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var text = document.getElementById('text');

步驟事件建立及加入輸入的監聽

寫一個事件，每個步驟都會把TextArea的內容寫入textList，並寫步驟+1

function textWrite(){
    step++; 
    textList.push(text.value);
}

當然只有事件是不會自動執行的，此時我們需要監控TextArea的輸入，並執行上面的事件

`1`	`text.addEventListener('input', textWrite);`

上下步事件建立

這邊開始就簡單了，上一步只要讀取上個Array元素的資料並塞進TextArea，下一步則是倒過來。

prev.onClick = function(){
    // 判斷是否還有上一步
    if(step < 2){
        alert('沒有上一步');
    }else{
        step--;// 步驟往回一步
        text.value = textList[step - 1]; // 因為Array從0開始所以要-1
    }
}

next.onClick = function(){
    if(step => textList.length){
        alert('沒有下一步');
    }else{
        step++;
        text.value = textList[step - 1];
    }
}

Demo

延遲紀錄的實現

這個就要使用我的上一篇文章，使用Lodash的_.debounce就能實現了。

1
2

var debounce = _.debounce(textWrite, 500);// 延遲500毫秒紀錄
text.addEventListener('input', debounce);// 改成監聽延遲函數

Demo2

步驟器的限制

要限制很簡單，只要儲存容器本身要限制寬度就行，這邊主要的另一個問題應該是超出範圍是該怎麼辦？答案很簡單就是把現有資料向前移動就行，然後在最後一項資料再塞進新資料。

var textList = new Array(3); // 限制Array只能4個元素
function textWrite(){
    // 判斷是否已到最大紀錄步驟
    if(step === textList.length){
        for(var i = 0;i < textList.length - 1; i++){
            textList[i] = textList[i + 1];
        }
        textList[step - 1] = text.value; 
    } else {
        step++; 
        textList[step] = text.value;
    }
}

Demo3

後記

整體來說不難，最後一項步驟器的限制難度有比較高，我在想資料位移時還一直想到腦筋打結，原本是for遞減，後來想一想好像遞增比較好寫，害我卡了很久，不過很多IT邦很多大大說編輯器很難寫是真的，雖然基本的觀念不是很難，但是細部的微調真的很難寫，例如我其時還少寫了一個步驟不在最後一步時，要覆寫後面的步驟，實作起來應該是更難，我這邊就不做了(暈)。

Lodash - 使用debounce做事件延遲

Wed, 05 Sep 2018 20:54:53 +0800

前言

這篇也是在IT邦幫忙解決的題目，最初問法是說做一個計時器，結果搞半天不是，他是想做一個事件延遲3秒再執行才對，而且如果按鈕連續點擊，會以最後一次點擊完3秒後才執行事件。

解決方法

這個其實是我在學Vue.js的過程碰巧看到的函式庫Lodash，它的debounce方法可以延遲執行。

註：debounce可以翻防抖動或防反動都行

程式實作

引用Lodash

引入CDN

`1`	`<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>`

NPM安裝

`1`	`$ npm i --save lodash`

`1`	`var _ = require('lodash');`

建立HTML物件

先做出一個Button和一個訊息DIV

1
2

<button id="showBtn" type="button">顯示訊息</button>
<div id="Message"></div>

建立Debounce事件

寫一個函數顯示訊息，並使用_.debounce()延遲執行訊息消失事件

var showBtn = document.getElementById('showBtn');
var msg = document.getElementById('Message');

// 消失事件
var hideMsg = function(){
    msg.innerHTML = '';
}

// 延遲一秒消失
var debounce = _.debounce(hideMsg, 1000);

建立Button Click

// 點擊事件
showBtn.onclick = function(){
    msg.innerHTML = '點擊成功';
    debounce();
};

註：如果_.debounce()要放在funtion或變數裡，不然會沒效果

Demo

點完一次一秒會消失，如果一直點的話不會消失，直到停止點擊一秒後才消失。

後記

其實這個還蠻好玩的，只是之前實作的時候是用Vue.js，沒想到直接實作卡那麼久，原來是_.debounce()要包在function裡面不然他就不會跑了，就這樣鬼打牆好久，不過有學到東西是最重要的。

參考＆延伸閱讀

Vue.js - 表單驗證實作

Sun, 10 Sep 2017 21:06:07 +0000

前言

最近覺得Vue還蠻好玩的，剛好我需要挑一個前端框架來玩玩，所以就挑這個囉！

實作說明

整體流程

我要用Vue來監控Form所有的值，使用Regular Expression(正規表達式)來驗證是否錯誤，錯誤提示的部分使用Bootstrap 4

簡單範例

HTML部分建立一個input 數值使用v-model綁在data上，v-bind:class則是顯示錯誤的開關在建立一個invalid-feedback的div，裡面用來放錯誤訊息

<label for="username">帳號</label>
<input type="text" class="form-control" name="username" v-bind:class="{ 'is-invalid': usernameError }" v-model="username"
    placeholder="Username">(最多10個字)
<div class="invalid-feedback">
    {{ userErrMsg }}
</div>

Vue部分創建3個Data username用來繫結輸入的值、usernameError用來控制是否錯誤、userErrMsg用來控制錯誤訊息使用Vue的watch事件用正規表達式檢查是否錯誤

var app = new Vue({
    el: '#app',
    data: {
        username: '',
        usernameError: false,
        userErrMsg: ''
    },
    watch: {
        username: function () {
            var isText = /^[a-zA-Z0-9]+$/;
            if (!isText.test(this.username)) {
                this.usernameError = true;
                this.userErrMsg = '請勿包含特殊字元';
            }
            else if (this.username.length > 10) {
                this.usernameError = true;
                this.userErrMsg = '請勿超過10個字';
            }
            else {
                this.usernameError = false;
            }
        }
    }
});

完整實作範例

HTML部分

<div id="app">
    <div class="row">
        <div class="form-group">
            <label for="username">帳號</label>
            <input type="text" class="form-control" name="username" v-bind:class="{ 'is-invalid': usernameError }" v-model="username"
                placeholder="Username">(最多10個字)
            <div class="invalid-feedback">
                {{ userErrMsg }}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <label for="">密碼</label>
            <input type="text" class="form-control" name="password" v-bind:class="{ 'is-invalid': passwordError }" v-model="password"
                placeholder="Password">(至少6位，小於15位，必須包含大小寫和數字)
            <div class="invalid-feedback">
                {{ passErrMsg }}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <label for="">E-Mail</label>
            <input type="text" class="form-control" name="email" v-bind:class="{ 'is-invalid': emailError }" v-model="email" placeholder="Email">
            <div class="invalid-feedback">
                {{ emailErrMsg }}
            </div>
        </div>
    </div>
</div>

JS部分

var app = new Vue({
    el: '#app',
    data: {
        username: '',
        usernameError: false,
        userErrMsg: '',
        password: '',
        passwordError: false,
        passErrMsg: '',
        email: '',
        emailError: false,
        emailErrMsg: ''
    },
    watch: {
        username: function () {
            var isText = /^[a-zA-Z0-9]+$/;
            if (!isText.test(this.username)) {
                this.usernameError = true;
                this.userErrMsg = '請勿包含特殊字元';
            }
            else if (this.username.length > 10) {
                this.usernameError = true;
                this.userErrMsg = '請勿超過10個字';
            }
            else {
                this.usernameError = false;
            }
        },
        password: function () {
            var isText = /^[a-zA-Z0-9]+$/;
            var inclde = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/;

            if (!isText.test(this.password)) {
                this.passwordError = true;
                this.passErrMsg = '請勿包含特殊字元';
            }
            else if (this.password.length < 6) {
                this.passwordError = true;
                this.passErrMsg = '請勿少於6個字';
            }
            else if (this.password.length > 15) {
                this.passwordError = true;
                this.passErrMsg = '請勿超過15個字';
            }
            else if (!include.test(this.password)) {
                this.passwordError = true;
                this.passErrMsg = '至少包括一個大小寫字母或數字';
            }
            else {
                this.passwordError = false;
            }
        },
        email: function () {
            var isMail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
            if (!isMail.test(this.email)) {
                this.emailError = true;
                this.emailErrMsg = 'email格式錯誤';
            }
            else {
                this.emailError = false;
            }
        }
    }
});

後記

表單驗證使用Vue.js之後做起來方便多了，驗證的非常及時，跟Bootstrap搭配起來也非常方便，只要監控的數值改變，Vue.js便會重新渲染，相較自己寫JS按下Submit才檢查來得更即時。

CSS - Animate.css 好用的CSS動畫函式庫

Thu, 01 Jun 2017 21:37:20 +0000

前言

今天上班時發現好玩的Css動畫函式庫 Animate.css，由Daniel Eden製作，Soure Code也有公開是GitHub上面，回家後馬上抓來玩玩看效果還不錯，在這邊紀錄一下筆記。

使用方法

先去官網取的Animate.css這隻檔案然後引入自己的網頁裡

`1`	`<link href="animate.css" rel="stylesheet" type="text/css">`

再來只要修改標籤的class改成要的效果，效果可以看官網的範例，然後再class還要再加上animated就行了例如我要給一行字執行wobble這個特效

`1`	`<p class="wobble animated">Test</p>`

這樣就OK了，不過只會執行一次喔!想要多次當然只能依靠JS幫忙簡單寫一下，例如我要按下一個Button讓文字產生效果 Html部分

1
2

<button id="testBtn">Test</buttion>
<p id="testWord">Test Word</p>

JS部分

// js
var btn = document.getElementById('testBtn');
var animate = function(){
    var imageCss = docunment.getElementById('testWord');
    imageCss.className = "wobble animated"; 
}
btn.onclick = animated;

// jquery
$('#testBtn').click(function(){
    $('#testWord').attr("class","wobble animated");
});

簡單範例

因為同事問過是不是能用在圖片，所以我就用圖片當範例不用文字了!

效果：

後記

這個真的蠻好玩的，配合JS都能自己做出簡單的輪播，對後端工程師來說真的很好上手。

附錄

Animate.css的GitHub

Cordova - 環境安裝2 - Android篇

Mon, 08 May 2017 20:14:58 +0000

前言

繼上篇Cordova安裝之後，接下來要說一下怎麼編譯成apk和使用android模擬器運行，其實我在學會使用Apache Cordova的編譯器之前，都是用Adobe Phonegap的線上編譯器，其實用久真的不是很好用，還是能在自己的PC編譯比較好，那就廢話不多說進入實作吧。

實作

幫專案添加android platform

使用以下指令

`1`	`$ cordova platform add android`

成功的話專案下的platforms資料夾底下會多出一個android資料夾

使用android 模擬器模擬

使用以下指令

`1`	`$ cordova run android`

然後應該會看到以下錯誤訊息，因為還沒設置android sdk的path

設置Android_Home和Android的path

對我的電腦右鍵內容->進階系統設定->進階->環境變數環境變數在windows上分2種一種是指對使用者(上面)，一種是對全部使用者(下面)，這邊編輯使用者就好了! 然後找出自己sdk的安裝位置，然後新增的2個值，指向platform-tools和tools這2個位置，如果是win7的話記得都要在後面加上;，我這邊是win10比較高級有UI可以用.. 再新增一個ANDROID_HOME變數指向android-sdk根目錄

設置完成後記得關掉命令提示字元(終端機)，因為他不會自己重讀path一定要重開，我第一次就笨笨的設好了為啥還抓不到… 然後在執行一次剛剛的指令

`1`	`$ cordova run android`

應該會有抓不完jdk，然後又丟新錯誤給我

添加licenses

這步我記得在win7是沒這問題，不知道是不是新版sdk有什麼問題，google了一下用這2行指令解決

1
2

$ mkdir "%ANDROID_HOME%\licenses"
$ echo |set /p="8933bad161af4178b1185d1a37fbf41ea5269c55" > "%ANDROID_HOME%\licenses\android-sdk-license"

然後正常來說應該就行了，但是win10很討厭把資料夾的權限鎖住了，造成以下錯誤訊息

打開sdk資料夾權限

修改Windows資料夾權限給Cordova使用

執行及編譯成apk

到這步我是沒問題了，如果還有問題可能是sdk的platform設定有問題，個人公司的win7碰到的，有問題去目錄底下的AVD Manager.exe設定一下目標平台然後再執行一次

`1`	`$ cordova run android`

成功後如下圖結果然後編譯apk指令

`1`	`$ cordova build android`

編譯後可以再專案目錄底下找到apk

後記

其實工作時我並沒有成功過使用模擬器，只有編譯成apk，工作的電腦好像沒有Hype-V的功能連模擬器都不能用，在家用win10果然可以用，搞了好久終於設定完成!(累癱)

參考文獻

Cordova - 環境安裝

Sun, 23 Apr 2017 19:19:59 +0000

前言

什麼是Cordova?

Cordova是一種讓網頁工程師不需要學會手機程式原生語言(例如Java和objecive-C)，也能寫出手機App的一種網頁前端框架，不管是iOS或是Android平台，只要你會HTML、CSS、Javasript就OK了。

Cordova的演變

來簡單說說Cordova的演變Cordova的前身叫PhoneGap，原本是Nitobi開發的，後來被Adobe收購後改名叫做Adobe PhoneGap，Adobe又把代碼捐給Apache基金會，但保留商標所有權，Apache這邊則是改叫另一個名稱叫Apache Cordova。基本上Adobe PhoneGap和Apache Cordova的基底都是Cordova，所以兩邊的寫的程式碼可以共通是沒問題，不過platform建議是用同一邊寫的，然後兩邊環境有什麼不同也大概說一下Adobe PhoneGap這邊是要付費的而且編譯器是在雲端上編輯，沒付費的話還是能用，只是線上的專案只能創建一個，可以拿到的軟體部分只有模擬器的部分，Apache Cordova這邊則是編譯和模擬器全都有，這邊以Apache Cordova為主。

實作

事前準備工具

安裝Cordova

首先開啟自己的cmd安裝，Mac OS可能會有權限問題 npm前面記得加sudo

`1`	`$ npm install -g cordova`

裝好之後就能使用以下指令創建專案了

`1`	`$ cordova create 專案名稱`

再來我們要幫專案加入使用平台，我們一般會先用瀏覽器看，所以我們先裝browser這個platform，還有不要忘記指向自己的專案資料夾底下

`1`	`$ cordova platform add browser`

然後就能用我們的瀏覽器來跑了

`1`	`$ cordova run browser`

執行成功會自動開啟瀏覽器，然後按F12開啟開發人員模式，切成手機模式瀏覽，如下圖

後記

其實Cordova這框架是老闆想寫App但是沒人會，所以找來老師上了幾堂簡單的App課程，當時教得是Adobe PhoneGap，其實不知道為什麼不是教Apache Cordva，這個能做的事情明明比較多，後來想想好像是因為Adobe PhoneGap有圖形介面，大概是考慮了這問題，反正就因為這樣就莫名其妙開始使用了這框架，編譯成Android之前會在另外寫一篇，就先這樣啦!

參考文獻

Google API - 圖形驗證reCAPTCHA使用C#

Tue, 18 Apr 2017 20:34:16 +0000

前言

由於最近遇到有學生暴力破解公司寫的校園平台，至於為什麼會被破解，因為當初的人沒有寫驗證類的機制(汗)，於是只好馬上開始幫忙把登入頁面重新寫一遍，要擋暴力破解的方法第一個想到的就是驗證碼，稍微google了一下發現普通的驗證碼還不少都被破解，找了半天覺得Google的reCAPTCHA還不錯，於是就決定使用這個了，然後就開始說明吧!

開始實作reCAPTCHA

註冊

首先要去官方註冊註冊連結點這邊因為我們要在自己的機子測試所以label和Domains都填localhost

註冊完會得到一組Site key和一組Secret key

reCAPTCHA的驗證流程

驗證流程我用小畫家隨便畫了一下，大概是像上面那樣

程式實作

前端部分

先來看看官方文件解釋文件寫了很多，但是我覺得不是很重要，我們直接實作第二個範例

<html>
  <head>
    <title>reCAPTCHA</title>
    <script type="text/javascript">
        // 驗證成功後執行
        var onSubmit = function(token) {
            $('#captchaToken').val() = token;
        };
        var onloadCallback = function() {
            grecaptcha.render('reCAPTCHA', {
            'sitekey': '自己的site_key', // 這邊填寫自己的site_key
            'callback': onSubmit // 執行成功後onSubmit變數接收
            });
        };
    </script>
  </head>
  <body>
    <form method="POST">
        <div id="reCAPTCHA"></div>
        <input id="captchaToken" name="captchaToken" type="hidden" />
        <input name="submit" type="submit" />
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
  </body>
</html>

範例我有稍微改寫了一下，然後開始解說，我有在裡面加一個hidden的input，驗證成功後剛剛建立的input會接收回傳的token，然後使用者登入後就會把token傳回到後端

後端部分

再來看看官方的後端文件官方文件解釋2 前面一堆廢話就不用看了，直接看API Request和API Response的部分我們需要POST三個值到https://www.google.com/recaptcha/api/siteverify這位置上，然後官方丟回驗證是否成功的JSON字串回來。然後就來開始實作吧!

// 確認是否有Token回傳回來
if (Request.Form["captchaToken"] == "")
{
    Msg.Text = "請確認是否為機器人";
}
else
{
    // 建立一個HttpWebRequest網址指向Google的驗證API
    var req = (HttpWebRequest)HttpWebRequest.Create("https://www.google.com/recaptcha/api/siteverify");
    // Post的資料
    // secret:secret_key
    // response:回傳的Token
    // remoteip:設定的Domain Name
    string posStr = "secret=自己的secret_key&response=" + Request.Form["captchaToken"] + "&remoteip=" + Request.Url.Host;
    byte[] byteStr = Encoding.UTF8.GetBytes(posStr);
    req.Method = "POST";
    req.ContentType = "application/x-www-form-urlencoded";
    // 把要Post資料寫進HttpWebRequest
    using (Stream streamArr = req.GetRequestStream())
    {
        streamArr.Write(byteStr, 0, byteStr.Length);
    }
    // 取得回傳資料
    using (var res = (HttpWebResponse)req.GetResponse())
    {
        using (StreamReader getJson = new StreamReader(res.GetResponseStream()))
        {
            string json = getJson.ReadToEnd();
            Msg.Text = json;
        }
    }
}

我們用C#模擬HTML的form POST給google API認證，Msg物件則是是用來存放訊息用的，如果成功就會變跟下圖一樣如果錯誤的話success會是false。

補充

reCAPTCHA申請完後再進去設定裡會多一個Advanced Settings，可以用來調整驗證通過的難度

後記

其實這個API算簡單才花1天就做好了，Google登入這個還比較難，官方文件寫得亂七八糟，還好這個寫得很清楚流程又簡單，就當是又學到一個好東西(完)。