Pages

Friday, August 19, 2011

FreeEmbedChat - you've never seen a free PHP chat like this for your Moodle site before!

Julie slaps Frankie with a large trout.

Remember the line "...slaps... with a large trout"? in the good old days of the 1990s of the Internet when text ruled the roost and Internet connections were mainly dial-up lines, chat clients like mIRC and ICQ were all the rage. in this post, I unvei a modified version of PHPFreeChat that caters for Moodle and Web 2.0. You are cordially invited to read on!

I. Introduction

For the last 3 weeks I've been working on an embedded chat widget for my Moodle 1.9.7  site. I am sure that it can be easily modified to suit Moodle 2.x.
My improved chat is based on modified PHP code of Stephane Gully's excellent phpfreechat, Eloy Lafuente's Multimovie filter  and Simon Karpen's Voicethread filter.

I call this modified chat, "FreeEmbedChat".

        Sample screenshot1.

II. Embed Code for the FreeEmbedChat


Here's the code iframe I used to embed the chat inside a Moodle Label resource.

<iframe width="100%" scrolling="auto" height="804px" frameborder="1" align="left" marginwidth="5px" marginheight="5px" src="http://www.moodurian.com/FreeEmbedChat/index.php" name="Embedded Frame">&amp;nbsp;</iframe>


III. INSTALLATION INSTRUCTIONS

1. Download the zip from here.
2. Extract the zip file. The result is a folder named FreeEmbedChat. 
    FTP the FreeEmbedChat folder to your moodle folder.
    Do NOT put the FreeEmbedChat folder inside the mod folder. 
   The FreeEmbedChat folder should sit in the parent folder of the mod folder.

4. Create a label or a Website resource.
    Click on HTML mode. Paste the below code.

<iframe width="100%" scrolling="auto" height="804px" frameborder="1" align="left" marginwidth="5px" marginheight="5px" 
src="http://yourmoodlesite.com/FreeEmbedChat/index.php" name="Embedded Frame">
</iframe>

5. Edit the index.php file. At line 27, you will see this code:
    $params['admins'] = array('Frankie'  => '123', 'frankie' => '123');

Frankie and frankie are Moodle usernames. 123 are the passwords. If you are the Moodle site administrator, please change Frankie and frankie to your Moodle username. Change 123 to a new password. Please don't use the same password as your Moodle admin account!

For example, if your Moodle account is drefus, then you could change line 27 to:
$params['admins'] = array('drefus'  => 'admin');

This is needed especially if you do a /rehash command. 
The system will check if you are the admin by asking you for a password. 
You would then type admin and press Enter key to proceed.

6. That's it have fun!


IV. Improved Features In FreeEmbedChat

Here's what my improved (derivation) chat can do:

    1. Direct Login (integrated with Moodle username)
     It takes the Moodle username login as the chat username automatically
     Many thanks to Brian Lowe for his work in this area that started me off on this rabbit hole.

   2. Posting of Images direct
    You can copy and paste in an image URL and the image appears on the Chat post directly.
    Example chat post syntax:   http://url/filename.png or jpg, png or gif.

    3. Posting of embedded Youtube videos
     You can copy and paste in a youtube URL and the youtube video appears on the Chat post directly.
     Note: it requires a basic [y] [/y] post to embed the playable Youtube video inside the chat post
     Example chat post syntax:   [y]http://www.youtube.com/watch?v=crypticcode[/y]
    Make sure that the youtube URL ends with the crypticcode. 
    For example, if you used:
    [y]http://www.youtube.com/watch?v=BL0LQSRZS9w&feature=g-all-pls[/y]
      it will NOT work because of the added code in the form of &feature=g-all-pls!

    4. Embed Voicethreads 
     You can embed Voicethreads inside your chat post.
     Chat post syntax:   [[vt:value]]   or  [[vtsmall:value]]

The abovementioned features are NOT found in the stock downloadable version of PHPfreechat.
I'm trying to think of other useful Web 2.0 objects that would be useful if embedded in a chat. Does anything come to your mind?


V. Demo Site

For a working demo if you do not have a Moodle site, click on this link:
It will work!

For a working demo that works in a Moodle production site, click on this link:
Username: studentscm
Password: studentscm

FreeEmbedChat works best with Mozilla Firefox. I believe it has some issues with Internet Explorer.


         Sample screenshot2.
  

VI. Pedagogical Value

Does this Chat have any learning value? I believe it has.
I think that it might be a useful activity (almost akin to the Wiki) where a classroom of students can share posts of images, Youtube videos and VoiceThreads inside the chat window.

BTW, phpfreechat is a galaxy on its own. See http://www.phpfreechat.net/. For example, you can issue the command /join baseball and a new room tab is created. So multiple rooms can be created. There's also the whole slew of chatroom commands ala mIRC (harkening back to the good old days of chat - the 1990s!). Although one should be cautious of chat in the classroom, I think it might have some pedagogical value.  I'm not sure how it will fare with 20 or more users on other Linux servers.

It also comes with a word censor (check out the file /src/pfcglobalconfig.class.php) and all the features that a typical chat widget has. The colours can be changed by editing css files, and you can add a background image. I used an image named brick.jpg to make the background of gray bricks that you see in the screenshot. It also has many backslash ('/') chat commands.

You can disable the /nick command so that those who use the chat can be identified by their Moodle login. So no more monkeying behind the teacher's back by using anonymous or mysterious nicknames. i disabled the /nick command on my site and also in the zip file containing the source code.

It can be embeded into your Moodle course page, or as a webpage resource that can be opened as a separate window.


VII. Wish List and Free Source Code

This souped up, pimp-my-ride chat was created from Moodle php and phpfreechat code. So I am also releasing the code to others to improve upon it.

IS ANYONE INTERESTED? I'm still testing it, AND I'll be releasing the FULL PHP code to ALL MOODLERS EVERYWHERE fordownload from my Blog in a couple of days. If I could make the code available on Moodle.org, it would be even better.

Wish Item A
I would want my Chat to work with TeacherTube video embeds. The code to do it does exist in my php source code files, but the TeacherTube embed does not work due to outdated embed syntax - TeacherTube has changed its embed code syntax from previously, I think.

Right now, to embed an image, you just type in the image's URL and hit the send button. As in http://url/filename.png
And so,

Wish Item B
I would want VERY MUCH to embed Youtube videos WITHOUT the [y] and [/y] tags. It would be GREAT if the user could just type the Youtube video's URL directly, as in  http://www.youtube.com/watch?v=cyrpticode or even in full http://www.youtube.com/watch?v=cyrpticode&feature=feedu
and have the video embed itself in the chat stream.

Wish Item C
Also I would LOVE to have the user just copy and paste the Voicethread URL, as in  
and have the embed appear inside the chat stream. 

Wish Item D
In addition, there should still be a way to post links to Youtube and Voicethread and make them appear as clickable text hyperlinks on the chat post. Perhaps one would have to type a prefix tag to signal that the chat post is an actual link:

and then only the link http://voicethread.com/share/value will appear in the stream, not the embedded object itself. in otherwords, I want to dispense with any tags when posting Web 2.0 objects. The aim is to allow the user to paste in Web 2.0 URLs in the most user-friendly and convenient manner possible. The above wish items are achievable if you undersand how to use the PHP functions preg_replace() and preg_match() and preg_match_all().

Example codes are:

$voicethread_site = preg_replace('/http:\/\//','',$voicethread_site);

 $ret = preg_replace("#(^|[\n \]])([a-z0-9&\-_.]+?)
        @([\w\-]+\.([\w\-\.]+\.)*[\w]+)#ie",
        "'\\1...'", $ret);
if those 2 lines of code did not give you a splitting headache, then you are the right person to make FreeEmbedChat better. Any PHP programmers want to contribute to this project?

Wish Item E

I wish I could embed more Web 2.0 objects or thingies into the chat window. For example, slideshare, PDF files, PowerPoint, the sky's the limit. Is there any other Web 2.0 object that could be or should be chat-posted and auto embedded into the chat window? Let me know, share with me please.


VIII. Final Thoughts

Since the Chat code is heavily dependent on OBJECT EMBED code like


..there may be security issues (hacking, code injecting and other nasty, irritating stuff) or compatibility/poratability issues (some admins may turn off the Object embed feature on their Moodle site). I need some advice on this. Anyone?
What about licensing? Stephane Gully was gracious to keep its a Open Source. It is free as long as you keep the linkback logo on your chat widget. See http://www.phpfreechat.net/license for more details if you want to remove the logo and rebrand the widget.


Finally, I hope you can also contribute to this chat code to make it better. If you end up using it on your Moodle site, that would be meat and drink enough for me. wink
Regards
Frankie Kam
Email: boonsengkam@gmail.com
Melaka, Malaysia
http://moodurian.blogspot.com/


Postscript: You can download Version 1.1 (last updated on Monday 22/8/11, 6:20pm Malaysian time +8 GMT)
of FreeEmbedChat zip file from here.
Installation instructions are found inside.
PLEASE **ALSO** READ THE INSTRUCTIONS BELOW FOR CHMOD PRIVILEGES!



From the phpFreeChat installation webpage, http://www.phpfreechat.net/quickstart it seems that you need not (should not?) chmod 777 recursively. Instead, just a couple of folders to be 'chmoded' with 777 privileges. When reading the below instructions, when you see the text "phpfreechat-x.x", think "FreeEmbedChat".

Installation
Get the zip (or tar.gz for unix users) archive from the download page


Unzip the archive localy then upload the “phpfreechat-x.x” directory on your server into a browsable directory (public directory). Tip: if you have a SSH access, I suggest to untar the archives directly on the server using
“tar xzf phpfreechat-x.x.tar.gz” command.

Give the web server's write permissions to “phpfreechat-x.x/data/public” and “phpfreechat-x.x/data/private” directories. If you are using FTP:


CHMOD 777 phpfreechat-x.x/data/private
CHMOD 777 phpfreechat-x.x/data/public

If you are using SSH:
chmod 777 phpfreechat-x.x/data/*

Tip: On the latest version 1.x maybe it will not work and it will show you ”“Error: the chat cannot be loaded!…””, then try with 755 rights.

Browse the “phpfreechat-x.x” directory with your browser and enjoy !


END

last revised on 5th June 2012 by Frankie Kam.

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!

Ratings and Recommendations by outbrain