顯示具有 Nodejs 標籤的文章。 顯示所有文章
顯示具有 Nodejs 標籤的文章。 顯示所有文章

2015年8月7日 星期五

Laravel 5.1 廣播事件 - 利用 redis & socket.io (事件實作)

主要參考 Step by Step Guide to Installing Socket.io and Broadcasting Events with Laravel 5.1 此篇教學,因此寫下步驟提醒自己,若要詳細的圖文配置請自行參閱。

Step1. 安裝新的 npm pakage & 更新 composer.json
  • npm install express ioredis socket.io --save
  • composer require predis/predis
Step2. 創建廣播事件
  • php artisan make:event EventName
注意得去實作 ShouldBroadcast 介面,且注意又用 public 的方法去實作序列化&送資料。

Step3. 創建 View & Route

注意在client頁面 socket.io.js 的引入,若沒有可以去抓下來放 assets/js 或者直接用 cdn。

Step4. 建立 node Server 端 socket.js

redis 必須去 subsrcibe 與 EventName.php 相同的 channel。
修改 .env 的 BROADCAST_DRIVER,因為原本是用 pusher。

Step5. 啟動 node server&redis-server
  • node socket.js
  • redis-server --port 3001
另外也有一篇很棒的參考,而且是中文(Laravel 5.1 Events Broadcasting 實務練習

Laravel 5.1 廣播事件 - 利用 redis & socket.io (環境設置)

筆記


最近因為專案需要學習了 Laravel,也因專案性質的緣故,因此可能會運用到如 socket.io 這一類在 node.js 上的功能,因此廣泛的 search 一下,發現原來在 Laravel 5.1 版釋出時,他的某一項新特色就包含了 Broadcasting, 而 Laravel 的重要元老Taylor Otwell也發表了相關的教學影片,同時在 L5.1穩定版釋出後在 Laracast 上釋出了一篇使用 Redis 替代原本 Pusher 的做法,非常吸引我因此做下此篇筆記。


前置動作


Laravel Homestead + vagrant 是學習 Laravel 的最佳利器,因此我選擇在此環境下建置,網路上也有許多方法(Getting Started with Laravel Homestead)透過 virtualbox 進行安裝。

Step 1.測試環境

安裝完畢後,在 Homestead 目錄使用 vargrant ssh 進入虛擬機,檢查分別檢查:
  • npm -v  => 會回傳版本後
  • redis-cli ping => 會回傳 pong
此時會對 homestead 好感度大大的提升(除了有讓環境跟其他的開發者一樣的優點,同時也解決了許多套件安裝的麻煩)!

Step 2. 創建新專案&站台

創建新的 laravel 專案,在本機端的對應 folder 利用指令創建專案
  • composer create-project laravel/laravel your-project-name
修改 /etc/hosts,並加入以下
  • 192.168.10.10 your-project-name.app
進入 homestead 虛擬機 serve 新站台
  • serve your-project-name.app /home/vagrant/Code/path/to/public/directory 80
最後可以測試一下 your-project-name.app ,如果在瀏覽器出現歡迎頁面就成功了!


2015年5月23日 星期六

Nodejs實作(3) - Socket.io + MySQL 即時同步訊息

這一個練習是延續上一篇 Nodejs實作(2) - Socket.io 實現多人即時同步聊天室,但是加上了 MySQL,想做訊息儲存,另一方面也是想要模仿例如 Facebook,Twitter 等即時狀況同步的情況。

新增 MySQL Table

status table structure

設置 Node 環境


設置此次運行環境因此先在當前目錄設定  package.json 安裝待會用到的套件及相依性,並且利用 command line 在當前目錄 npm install
package.json


撰寫 server.js


引入套件並且設置好 MySQL 連線資訊,再來設定 route.
撰寫 socket.io function,來處理 client端與server端互動功能,注意以下幾個 socket.io 的用法:
  1. io.sockets.emit:觸發所有 sockets(Client端)。
  2. io.sockets.on:等待所有進入的 sockets(Client端)。
  3. socket.emit:與 socket.on 相搭配,為event driven之用法,但對像為單一特定 socket。
  4. socket.on
可以注意第26行, add_status 所等待的 callback 為 res,而 res 是 MySQL 處理連接以及query成功與否的 callback


撰寫 index.html

可注意第10行,當socket與server連接上後,JQuery去判斷是否 add_status 的按鈕是否被按下,若有的話就將 comment 欄位的資訊當作參數,並且 emit 'status add' 這個事件,然而若 server.js 的 res 為 true的話,則將 status 播送到每個連接上的 sockets(Client端)。


結果

開兩個瀏覽器測試


資料庫現況
最後就成功拉!感覺還滿好玩的,這一次練習就是在釐清 socket.io , event driven , callback 的相關實作。


參考

NodeJs - 事件導向之特色

簡介

NodeJs 相當擅長於在事件的掌控,而在眾多實作當中,我們很常看到某個事件觸發另一事件,然而這就涉及到了 Listener 以及 Emitter 的角色關係。

2015年1月1日 星期四

Nodejs實作(2) - Socket.io 實現多人即時同步聊天室

Socket.io

Socket.io 官網
簡單來說Socket,由網路的角度來看,socket就是通訊連結的端點;從程式設計者的角度來看,socket提供了一個良好的介面,使程式設計者不需知道下層網路協定運作的細節便可以撰寫網路通訊程式。

2014年12月27日 星期六

Nodejs實作(1) - 新手看Nodejs順便動手做!

因為Nodejs實在是太潮了,不學一下實在跟不上時代,因此便開始摸索。


Nodejs


基本與歷史

第一個版本由Ryan Dahl於2009年釋出,後來,Joyent僱用了Dahl,並協助發展Node.js是一個事件驅動I/O伺服器端的Javascript,基於Google V8 engine,本身是一個Server-side的Javascript,來做個比喻也就是PHP與Apache的結合,但Nodejs不需要伺服器。