I have a Windows Media Object that is showing a stream from our conference center from Windows media encoder. The browser everyone uses is IE8. I have created the object and adjacent to it a chat application using AJAX/JQuery. The goal of the chat app was to ping the server for new messages in the database. For some reason, The typing becomes troublesome missing some keys as the user types. i.e. "Fox jumps over the brown cow" turns into "fx jum ovr thbrown ow"
I have tried:
- Putting the object in an iframe
- Removing the Server Ping Function completely
- Placing the append in an if statement
Here is the code:
HTML:
<div class="wrapper">
<div id="video">
<div id="player">
<!--[if !IE]> -->
<object id="mediaplayer" type="application/x-ms-wmp" data="data:application/x-ms-wmp," class="wide">
<param name="src" value="mms://r2pwd-s096186:8080" valuetype="ref" type="video.wmv">
<param name="animationatStart" value="1">
<param name="transparentatStart" value="1">
<param name="windowlessVideo" value="true">
<param name="autoStart" value="1">
<param name="ShowControls" value="0">
<param name="ShowDisplay" value="0">
<param name="ShowStatusBar" value="0">
<param name="playcount" value="10">
<param name="autoRewind" value="1">
<param name="displaysize" value="0">
<param name="stretchtofit" value="1">
<param name="enableContextMenu" value="0">
<param name="uiMode" value="none">
<strong>Error:</strong>You need <a href="http://port25.technet.com/pages/windows-media-player-firefox-plugin-download.aspx">Windows Media Player Plugin</a>.
</object>
<!--> <![endif]-->
<!--[if IE]>
<object id="mediaplayer" type="application/x-ms-wmp" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" class="wide">
<param name="url" value="mms://r2pwd-s096186:8080" valuetype="ref" type="video/x-ms-wmv">
<param name="animationatStart" value="1">
<param name="transparentatStart" value="1">
<param name="autoStart" value="1">
<param name="ShowControls" value="0">
<param name="windowlessVideo" value="true">
<param name="ShowDisplay" value="0">
<param name="ShowStatusBar" value="0">
<param name="playcount" value="99999">
<param name="clickToPlay" value="1">
<param name="autoRewind" value="1">
<param name="displaysize" value="0">
<param name="stretchtofit" value="1">
<param name="enableContextMenu" value="0">
<param name="uiMode" value="none">
<strong>Error:</strong>You need <a href="http://www.microsoft.com/windows/windowsmedia/download/plugin.aspx">Windows Media Player Plugin</a>.
</object>
<![endif]-->
</div>
</div>
<div id="chat">
<div id="chatWindow">
<div id="chatBox"></div>
<div id="chatControls">
<div id="input">
<input id="messageInput" name="message" value="" />
</div>
<div id="send">
<input id="sendButton" name="message" type="button" value="Send" />
</div>
</div>
</div>
</div>
</div>
The JS:
function getSessionMessages() {
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
var today = new Date(),
h = today.getHours(),
mins = today.getMinutes(),
secs = today.getSeconds(),
m = checkTime(mins),
s = checkTime(secs),
tod = "am",
newMessage = $('#messageInput').val();
if (h>12){
h=h-12;
tod="pm"
}
var timeStamp = h + ":" + m + ":" + s + tod,
data = {time: timeStamp, guid: guid},
json = JSON.stringify(data);
$.ajax({
type: "POST",
url: wsPath+'?method=getSessionMessages',
contentType: "application/JSON; charset=utf-16",
data: json,
cache: false,
beforeSend: function() {
//alert(json);
},
error: function(data,status,error){
alert('Something went wrong: ' + data + ', ' + status + ', ' + error);
},
dataType: 'JSON'
}).done(function(api) {
//console.log( api );
$(api).each(function( index, value ) {
$('#chatBox').append('<div class="messageEntry"><span>' + this.TIMESTAMP + ': </span><span><strong>' + this.NAME + '</strong></span>: <span>' + this.MESSAGE + '</span></div>');
});
$('#chatBox').scrollTop($('#chatBox')[0].scrollHeight);
newMessages();
});
};
// This is the service call that is on an interval
function newMessages () {
setInterval(function () {
var count = $('.messageEntry').length,
data = {numOfItems: count, guid: guid},
json = JSON.stringify(data);
$.ajax({
type: "POST",
url: wsPath+'?method=newMessages',
contentType: "application/JSON; charset=utf-16",
data: json,
cache: false,
beforeSend: function() {
//alert(json);
//console.log(json);
},
error: function(data,status,error){
alert('Something went wrong: ' + data + ', ' + status + ', ' + error);
},
dataType: 'JSON'
}).done(function(api) {
//console.log( api[0] );
if (api == ""){
return false
}else{
$(api).each(function( index, value ) {
$('#chatBox').append('<div class="messageEntry"><span>' + this.TIMESTAMP + ': </span><span><strong>' + this.NAME + '</strong></span>: <span>' + this.MESSAGE + '</span></div>');
});
}
});
}, 1000);
};
// This is the service call when a new message is input
function sendMessage() {
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
var today = new Date(),
h = today.getHours(),
mins = today.getMinutes(),
secs = today.getSeconds(),
m = checkTime(mins),
s = checkTime(secs),
tod = "am",
newMessage = $('#messageInput').val()
if (h>12){
h=h-12;
tod="pm"
}
var timeStamp = h + ":" + m + ":" + s + tod,
data = {time: timeStamp, message: newMessage, userID: userID, guid: guid},
json = JSON.stringify(data);
$.ajax({
type: "POST",
url: wsPath+'?method=newMessage',
contentType: "application/JSON; charset=utf-16",
data: json,
dataType: "JSON",
cache: false,
beforeSend: function() {
//alert(json);
},
error: function(data,status,error){
alert('Something went wrong: ' + data + ', ' + status + ', ' + error);
},
dataType: 'JSON'
}).done(function(api) {
//console.log( api );
$('#chatBox').append('<div class="messageEntry"><span>' + api.TIMESTAMP + ': </span><span><strong>' + api.NAME + '</strong></span>: <span>' + api.MESSAGE + '</span></div>');
$('#chatBox').scrollTop($('#chatBox')[0].scrollHeight);
$("#messageInput").val('');
});
}
$(document).ready(function () {
getSessionMessages();
$("#sendButton").on('click', function () {
sendMessage();
});
$("#messageInput").on('keypress', function (e) {
if (e.which === 13) {
sendMessage();
}
});
});
The CFC:
<cfcomponent>
<cffunction name="getSessionMessages" access="remote" returntype="array" returnformat="JSON">
<!--- This is the service call that is called once the DOM is loaded
* Incoming Data: A Time Stamp and the GUID {time: timeStamp, guid: guid}
* It takes the messages that currently exist in the database and loads them into an array
* Outgoing Data: A Time Stamp, User Names and their messages
--->
<cfset params = toString( getHttpRequestData().content ) />
<cfset args = #deserializeJSON(params)# />
<cfset theguid = #args.guid# />
<cfquery name="qrym" datasource="Chat">
select NRCLive.*, name_last, name_first
from NRCLive inner join hr.dbo.tblRegionIIEmployee on
NRCLive.EmployeeID = hr.dbo.tblRegionIIEmployee.EmployeeID
where NRCLive.GUID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#theguid#">
</cfquery>
<cfset ary = arraynew(1) />
<cfoutput query="qrym">
<cfset sval = {timeStamp="#qrym.dtTimeStamp#", name="#qrym.name_first# #qrym.name_last#", message="#comment#"} />
<cfset retval = arrayappend(ary, sval) />
</cfoutput>
<cfreturn ary>
</cffunction>
<cffunction name="newMessages" access="remote" returntype="array" returnformat="JSON">
<!--- This is the service call that is on an interval
* Incoming Data: Current Number of chat entries and the GUID {numOfItems: count, guid: guid}
* It takes the current number of chat entries and uses that number to move through to latest chat entries that havent been added yet
* Then it grabs all new entries after that and sends the data back in an array
* Outgoing Data: A Time Stamp, User Names and their messages
--->
<cfargument name="numOfItems" type="array" />
<cfset params = toString( getHttpRequestData().content ) />
<cfset args = #deserializeJSON(params)# />
<!--- ****************************************************************************************
'
' Inputs:
' numOfItems - Existing comments in the chat box. We want to retrieve everything that comes
' AFTER this in the database.
'
' Outputs:
' JSON formatted array of messages contained in the database.
' *************************************************************************************** --->
<cfset theguid = #args.guid# />
<cfquery name="qrym" datasource="Chat">
select NRCLive.*, name_last, name_first
from NRCLive inner join hr.dbo.tblRegionIIEmployee on
NRCLive.EmployeeID = hr.dbo.tblRegionIIEmployee.EmployeeID
where NRCLive.GUID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#theguid#">
</cfquery>
<cfset ary = arraynew(1) />
<cfset istart = #args.numOfItems#+1 />
<cfif #qrym.RecordCount# GT 0>
<cfloop query="qrym" startrow="#istart#">
<!--- Screen chat messages for language --->
<cfinvoke component="chat" method="screenOutput" returnvariable="comment"
stext="#qrym.Comment# " />
<cfset sval = {timeStamp="#qrym.dtTimeStamp#", name="#qrym.name_first# #qrym.name_last#", message="#comment#"} />
<cfset retval = arrayappend(ary, sval) />
</cfloop>
</cfif>
<cfreturn ary>
</cffunction>
<cffunction name="newMessage" access="remote" returntype="struct" returnformat="JSON">
<!--- This is the service call when a new message is input
* Incoming Data: Current Number of chat entries and the GUID {numOfItems: count, guid: guid}
* It takes the current number of chat entries and uses that number to move through to latest chat entries that havent been added yet
* Then it grabs all new entries after that and sends the data back in an array
* Outgoing Data: A Time Stamp, User Names and their messages
--->
<cfset params = toString( getHttpRequestData().content ) />
<cfset args = #deserializeJSON(params)# />
<cfset lanID = "#args.userID#" />
<cfquery name="qryemp" datasource="HR">
select name_last, name_first, EmployeeID
from tblRegionIIEmployee
where Username = <cfqueryparam cfsqltype="cf_sql_varchar" value="#lanID#">
</cfquery>
<cfset timeStamp="#args.time#" />
<cfset name="#qryemp.name_first# #qryemp.name_last#" />
<cfset message="#args.message#" />
<cfset theguid = "#args.guid#" />
<!--- Screen chat messages for language --->
<cfinvoke component="chat" method="screenOutput" returnvariable="comment"
stext="#message#" />
<cfif #qryemp.RecordCount# EQ 1>
<!--- We should always have a recordcount of 1 --->
<!--- Enter into our NRCLive database --->
<cfquery name="qryins" datasource="Chat">
insert into NRCLive
(
GUID, Uname, EmployeeID, Comment, dtTimeStamp
)
values
(
'#theguid#', '#lanID#', #qryemp.EmployeeID#, '#comment#', '#timeStamp#'
);
</cfquery>
</cfif>
<cfset myResult={timeStamp="#args.time#", name="#name#", message="#comment#"} />
<cfreturn myResult>
</cffunction>
<cffunction name="screenOutput" access="public" returntype="string">
<!--- ************************************************************************************
' Created By: Tom Easum
' Date: 07/09/2014
'
' Inputs:
' stext - The message we need to filter.
'
' Outputs:
' A string that has been cleared for nrc use.
'
' We may need to filter language for our chat app. At the very least we need to change
' "Yes" into "Yes." and "No" into "No." due to an existing bug in CF that, when
' returning JSON values, changes this to TRUE/FALSE. We should also filter for
' swear words.
' ********************************************************************************** --->
<cfargument name="stext" type="string" required="yes" hint="chat application message">
<!--- Filter for the stupid CF bug that was never fixed. Yes is JSON'd into True and No is JSON'd into False --->
<cfset sval = #arguments.stext# />
<cfif #sval# EQ "yes" or #sval# EQ "Yes" or #sval# EQ "YES">
<cfset sval = "#sval#." />
</cfif>
<cfif #sval# EQ "no" or #sval# EQ "No" or #sval# EQ "NO">
<cfset sval = "#sval#." />
</cfif>
<!--- Filter for bad language Took this out so I don't get a bad nod from stack for cusasing LOL--->
<!--- Filter for javascript, or other bad hacking attempts --->
<cfset sval = ReplaceNoCase(sval, "<script", "", "all") />
<cfreturn sval />
</cffunction>
</cfcomponent>
