Audio-Video Call webRTC and Ratchet (PHP WebSocket) - javascript

I have my own chat system based on "My friends" and i have a list with online friends and i want when i click on a friend conversation to add the call functions but i don't know how to manage'it to have'it work. Can u help me pls? the conversation is with me (a) and user b (daniel) something like facebook calls for example, but here i have "localhost/chat/chat.php?room=Daniel "to be created when i click user b and all the call functions to work. (The code is written in PHP + Jquery and for audio call & video call i use (https://github.com/amirsanni/Video-Call-App) check the comm.js and comm.html files i guess from here i can mangete to have'it work..
Javascript Code:
$(document).on('click', '.contact', function(){
$('.contact').removeClass('active');
$(this).addClass('active');
var username = $(this).attr('data-tousername');
var to_user_id = $(this).data('touserid');
showUserChat(to_user_id);
history.pushState( null,null, '?chat='+username); //This is changing the url to ?room=username, but it dsn't do the trick..
});
function showUserChat(to_user_id){
$.ajax({
url:"pagini/chat/chat_action.php",
method:"POST",
data:{to_user_id:to_user_id, action:'show_chat'},
dataType: "json",
success:function(response){
$('#userSection').html(response.userSection);
$('#aboutusr').html(response.aboutme);
$('#conversation').html(response.conversation);
$('#unread_'+to_user_id).html('');
}
});
}

Related

Stackoverflow, Linkedin like notification when there is new activity

Lots of site have notification system when there is new posts.
For example,
in stackoverflow
in LinkedIn
When this is clicked the page reloads.
I wanted to implement this kind of system in my application.
So when new items are added in database, show this kind of notification, and when user clicks it. Reload the page.
Does anyone have idea of how this kind of notification works and how we can implement it?
Any post or idea regarding this would be helpful.
Also, If someone thinks this question can have more tags, feel free to add.
Here is the quick idea how you can do this.
Client side auto refresh and get content using ajax post.
<h2>Notification</h2>
<div id="divNotif" style="display:none;"></div>
<script id="sessionJs" type="text/javascript">
function GetNotification() {
$.ajax({
type: "GET",
url: '#Url.Action("GetNotification", "Notification")',
dataType: "html",
success: function (data) {
$("#divNotif").html(data);
$("#divNotif").fadeIn('slow');
setTimeout(function () { GetNotification(); }, 5000); //change timeout duration here
},
error: function (data) {
//alert("BAD:" + data.statusText);
}
});
}
GetNotification();
</script>
Controller return json
[HttpPost]
public ActionResult GetNotification()
{
int notifCount = fromDb.NotificationCount;
return Content("<span>New notification " + notifCount + "</span>", "text/html"); // returning a PartialView would be better one
}
Ashwini Vermas answer uses polling instead of pub/sub. It will increase trafic and put strain on the web server etc. Use SignalR instead.
I would publish all system events on a message bus then clients can subscribe to them using this library
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy
Here is a demo
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/tree/master/SignalR.EventAggregatorProxy.Demo.MVC4
disclamier: I'm the author of the library

Ajax Login With PHP Issue

I am creating A login system using AJAX,PHP & SQL obviously.
Anyway I am trying to implement A real time login feature so it will log the user in without refreshing the page.
I have done that almost but the only issue when the user clicks remember me that uses cookies instead of sessions but the JQuery isn't proccessing that?
I want it to detect depending if it was checked ether remember the user or not it only starts a session, when it does register a cookie the logout page is not deleting the cookie which he did before i added the jquery code in so nothing on the php end and I am mainly A PHP Developer and still learning.
(I cannot post the server side code for privacy reasons as I be using this in A project
but it looks similar to any other normal php login script)
Here's the JQuery
function validLogin(){
var user_login=$('#user_login').val();
var user_pass=$('#user_pass').val();
var remember_me=$('#remember_me');
var dataString = 'user_login='+ user_login + '&user_pass='+ user_pass;
$("#flash").show();
$("#flash").fadeIn(100).html('Loading..');
$.ajax({
type: "POST",
url: "ajax/procces.php",
data: dataString,
cache: false,
success: function(result){
var result=trim(result);
$("#flash").hide();
if(result=='correct'){
window.location='index.php';
}else{
$("#errorMessage").html(result);
}
}
});
}
function trim(str){
var str=str.replace(/^\s+|\s+$/,'');
return str;
}
Thanks
You don't pass your variable 'remember me' to your ajax request. For instance :
data: {login: user_login, passwd: user_pass, rememberMe: remember_me}
Another point, be careful you treat information from client-side. Never trust the client. Test all your values in PHP.

Ajax request 'onError' handler

There is one feature on my site: delete without page refresh. The user just presses 'delete' and the browser will send Ajax-request. It will load 'delete' script with id parameter.
All work well. But it is not very good because of referential integrity of the database. For example, It is possible to delete street, where some people are living.
I want to upgrade my script. I want to add a check to delete script and don't let delete data if some 'people' are connected to 'street' table.
jQuery handler of button click:
$('body').on('click', '.deleteStreet', function()
{
var id = $(this).attr('id');
var hideMe = $(this).parent().parent();
var dataString = 'id=' + id;
if(confirm("Are you sure you want to delete street? It is possible some people living there!"))
{
$.ajax({
type: "GET",
url: "/index.pl?mode=streets&action=delete",
data: dataString,
cache: false,
success: function(e)
{
hideMe.hide();
}
});
return false;
}
});
It will call script anyway and now will delete data anyway. I can add some checks to delete script now and it wouldn't delete, but jquery script would work anyway and will hide table row anyway (because request was send ok, without 404, etc)
1) Is it possible to see delete script result and hide or not hide row depending on it? For example, it will return true or false, js script will catch it and show message about deleting or not deleting of data depending on it.
2) This problem caused by structure of my site. There are some switches on index.pl and load appropriate scripts loading depending on query (mode=street then load street.pl, mode=user then load users.pl etc). So it will show all data loaded before delete.pl script and it will be impossible to check script returned true or false.
Any help? :) Thank you!
P.S.: I am very sorry for my awful english.
You can have the result of your ajax call in the first parameter of the success callback. ex:
$.ajax({
type: "POST",
url: "/index.pl?mode=streets&action=delete",
data: dataString,
cache: false,
success: function(e)
{
if(e === '1'){
hideMe.hide();
}
}
});
try to log your result in the console for tests: console.log(e).
For deleting data you should use a POST request ( or DELETE but not supported by all browsers).
I dont know how your datas (streets) looks like but an other way could it be to return all your existing streets in a json object on the delete request result. And refresh all lines.

Facebook like button loads only once

I've added facebook like button, but it works only once on the page. The page consists of "tiles" and every tile has own link and user should be able to "like" any tile on the page. The code of the called function is the following:
FB.Event.subscribe('edge.create', handleResponse(response));
var handleResponse = function(response) {
var query = FB.Data.query('SELECT like_count FROM link_stat WHERE url="some_url_goes_here"');
query.wait(function(rows) {
alert('number of likes ' + rows[0].like_count);
// ... other code
});
};
When user presses some button - appears Facebook "like" button (e.i. called function startFacebook(), the content of which is given above) together with like buttons of some other social networks.
Some time ago the contents of this function started with:
FB.Event.clear('edge.create');
but this is deprecated now and Facebook says that is should not be used any more and sends response like this:
c jssdk_error
m {"error":"Private method used","extra":{"args":"Event.clear"},"appId":"246731078776510"}
When I used FB.Event.clear - everything worked fine. Does anyone knows how to substitute this lacking funciton?
Thanks for help!
Are you trying to remove the event listener?
If so, then use FB.Event.unsubscribe just like you used FB.Event.subscribe:
var handleResponse = function(response) {
...
}
FB.Event.subscribe("edge.create", handleResponse);
...
FB.Event.unsubscribe("edge.create", handleResponse);

Voting box (plus/minus, not star rating)

I'm looking for a voting script/widget (preferably jQuery), but not a star rating one, one with +1 and -1 options like this (admire my profesionnal MSPaint skills ^^) :
Anyone know about one ?
Thanks a lot !
you can do this using ajax.
Recommend you set up some ajax listener page and ping with some userID and vote (1,-1) or something along those lines.
This assumes you have a userID and login credentials etc. Or you can register it against their IP or something.
Basically:
ajaxListener.php?ID=123456&vote=1
send the ajax listener, and then have the total vote count update when the ajax is complete (have your ajax listener echo back a string of data lets say):
voteTotal=10~totalVote=95
Once you read this with ajax, split it with javascript:
var split1=responseText.split("~");
var voteScore=split1[0];
var voteCount=split1[1];
not tested but this should work and complete what you are thinking.
ajax:
http://api.jquery.com/category/ajax/
$.ajax({ url: "ajaxTool.php?id="+idVariable, context: document.body,
success: function(){
$(this).addClass("done");
}});

Categories

Resources