I am using PubNub for in-app chat with Backbone and the javascript sdk. If I navigate to another view and return to the chat window, when I publish a message I receive it in duplicate. If I browse away again I receive messages in triplicate and so on..
I think I am subscribing again and again each time I return to the chat page - but I can't get the unsubscribe to work and I can't find any documentation on where else to subscribe from.
Is there a check I can use to see if I am already subscribed?
My code is:
// INIT
var channel = 'my_channel';
var pubnub = PUBNUB.init({
subscribe_key : 'demo',
publish_key : 'demo'
});
function chat(message) {
if (message.uid == "xxx") {
$("#convo").append('<div class="isaid">' + message.message + '</div><div class="clear clearfix"></div>');
} else {
$("#convo").append('<div class="hesaid">' + message.message + '</div><div class="clear clearfix"></div>');
}
}
pubnub.history({
channel : channel, // USER_ID Channel
limit : 30, // Load Last 50 Messages
callback : function(msgs) {
pubnub.each( msgs[0], chat );
}
});
pubnub.subscribe({
channel: 'my_channel',
callback: function(data) {
chat(data);
}
});
pubnub.publish({
channel: 'my_channel',
message: data
});
The pubnub variable was out scope for the unsubscribe.
Developer had to declare pubnub outside the function to unsubscribe.
Related
I am working with socket.io example for chat project. I want to add password protection to the chat application. This is just simple authentication. If user input wrong password, then server will disconnect this user.
Client side code:
var socket = io();
socket.emit('user name', username);
socket.emit('password', password);
Server side code:
socket.on('password', function (msg) {
if (msg !== '123321') {
io.emit('system info', 'Wrong password... Disconnecting ' + username+'...');
io.close(true);
return false;
}
});
The close() method doesn't work. the disconnected user still able to receive message from other users. So how to do this properly? Thank you.
Assuming you are creating an id (server side) with something like:
io.engine.generateId = (req) => {
return custom_id++; // custom id must be unique
}
You could close an specific connection using .disconnect() and you could call the id with socket.id
socket.on('password', function (msg) {
if (msg !== '123321') {
io.emit('system info', 'Wrong password... Disconnecting ' + username+'...');
io.sockets.connected[socket.id].disconnect();//<-- in this case it's just a number
}
});
This is My Pubnub Chat Code
var pubnub = PUBNUB.init({
publish_key : 'my_key',
subscribe_key : 'sub-key'
});
pubnub.subscribe({
channel : "{{$channel}}",
message : function(m){
$(".conversation-list").append(
'<li class="clearfix '+ m.clearifix +' ">' +
'<div class="chat-avatar">' +
'<img src="' + m.image + '">'+
'<i> {{date('h:i')}} </i>' +
'</div>' +
'<div class="conversation-text">' +
'<div class="ctext-wrap">' +
'<i> '+ m.name + '</i>' +
'<p>' + m.message + '</p>' +
'</div>' +
'</div>' +
'</li>'
).animate({scrollTop: $(".conversation-list")[0].scrollHeight}, 0);
$('.reply-text').val('');
},
//connect : publish
});
$('.send-reply-to-user').on('click', function (e) {
e.preventDefault();
if ($('.reply-text').val()== '')
return false;
else
console.log(pubnub.publish);
// console.log(this);
var user_to_id = $(".send-reply-to-user").attr('user_to_id');
var message = $('.reply-text').val();
var name = $('#user_name').val();
var image = document.getElementById("user_image").getAttribute("src");
var clearifix = $('#user_clearifx').val();
pubnub.publish({
channel : "{{$channel}}",
message: { name : name, message : message, image : image, clearifix : clearifix }
});
if ($.trim(message).length != 0) {
$.ajax({
url: '{{route('send:user:chat:message')}}',
cache: false,
method: 'POST',
data: {user_to_id: user_to_id, message: message, _token: '{{csrf_token()}}'},
beforeSend: function () {
},
success: function (result) {
}
})
}
});
This code is Working perfectly only problem is that messages are going to all users, I want to send msg to one to one user.
Example: User one: John send a message to User two Deo,
Example 2: John sends a message to Marry
and so on. Using Pubnub JS API, Backend as Laravel 5.6
I recommend using PubNub's opinionated JavaScript framework called ChatEngine. It takes away a lot of the heavy lifting involved with making chat with PubNub. Here is some example code to get you started making 1:1 private chats. Make sure you use the setup button to prepare the backend on your account.
<script src="https://cdn.jsdelivr.net/npm/chat-engine#0.9.5/dist/chat-engine.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Init ChatEngine with PubNub
const publishKey = '__Your_PubNub_Publish_Key__';
const subscribeKey = '__Your_PubNub_Subscribe_Key__';
const ChatEngine = ChatEngineCore.create({
publishKey,
subscribeKey,
}, {
globalChannel: 'global',
});
const user = {
uuid: 'randomstringofchars',
name: 'John Smith'
}
const chats = {};
ChatEngine.connect(user.uuid, user);
ChatEngine.on('$.ready', function(data) {
// store my new user as `me`
let me = data.me;
// returns a ChatEngine chat object
function makePrivateChat(theirUserId) {
const chatKey = [theirUserId, me.uuid].sort().join('-');
// Don't make the same 1:1 chat if it already exists
if (chats[chatKey]) {
return;
}
// true for private chat
const chat = new ChatEngine.Chat(chatKey, true);
chats[chatKey] = chat;
}
// Auto add a 1:1 chat to UI when invited by someone
me.direct.on('$.invite', makePrivateChat);
// Define a button for making new 1:1 chats in your UI
newOneToOneChatButton.on('click', function (event, theirUserId) {
someChatObject.invite(theirUserId);
});
});
</script>
Finally Fixed My issue, the private Channels working good , Actually problem was with my back-end. It was returning data from all the users i have fixed now its working fine.
I am trying to send Message to Particular Room, but it doesn't work and It sends message to all room along with my message being received twice from my name and with first chat room user name. Message from 1 Room is broadcasted to all Chat Room.
I have used Example Code from here- https://github.com/kataras/iris/blob/master/_examples/websocket/secure/main.go. and
https://github.com/kataras/iris/blob/master/_examples/websocket/native-messages/main.go
Below is the Code, I am using, that is giving me the error :
var myChatRoom = strconv.Itoa(room.ID)
ws := websocket.New(websocket.Config{})
ws.OnConnection(func(c websocket.Connection) {
c.Join(myChatRoom)
c.To(myChatRoom).EmitMessage([]byte(user.(users).Username + " has Joined Chat!"))
c.OnMessage(func(data []byte) {
message := string(data)
if message == "leave" {
c.Leave(myChatRoom)
c.To(myChatRoom).EmitMessage([]byte(user.(users).Username + " has Left Chat!"))
return
}
c.To(myChatRoom).EmitMessage([]byte(user.(users).Username + ": " + message))
})
c.OnDisconnect(func() {
fmt.Printf("Connection with ID: %s has been disconnected!\n", c.ID())
})
})
HTML Code:
<div id="messages" style="border-width: 1px; border-style: solid; height: 200px;overflow:auto"></div>
<input type="text" id="messageTxt" />
<button type="button" id="sendBtn">Send</button>
Javascript Code:
<script>
var messageTxt;
var messages;
var HOST = 'localhost'
jQuery(function() {
messageTxt = jQuery("#messageTxt");
messages = jQuery("#messages");
w = new WebSocket("ws://" + HOST + "/my_endpoint");
w.onopen = function() {
console.log("Websocket connection enstablished");
};
w.onclose = function() {
appendMessage(jQuery("<div><center><h3>Disconnected</h3></center></div>"));
};
w.onmessage = function(message) {
console.log("Message Appended: " + message)
appendMessage(jQuery("<div>" + message.data + "</div>"));
};
jQuery("#sendBtn").click(function() {
w.send(messageTxt.val().toString());
messageTxt.val("");
});
})
function appendMessage(messageDiv) {
messageDiv.appendTo(jQuery("#messages"));
}
</script>
Error:
It sends message to all ROOM and not specific Room.
User who created room first automatically joins all the ROOM
People sending message in other ROOM see their message being Repeated/cloned in their ROOM by "FirstUser" who created first room in chat. (Irrespective of whether he is member of the chat group or not)
Expecting:
People can send/receive message to only those room where they have joined.
First User should not be able to join CHATRoom automatically.
People should not see their message being repeated again with "FirstUser" name.
It was a tiny bug, fixed just moments ago. Please upgrade with:
go get -u github.com/kataras/iris
A new release "v10.6.3" was also pushed.
Thank you a lot #Belarus, you're great!
Sincerely,
Gerasimos Maropoulos,
Author of the Iris web framework.
I have run my nodeServer and Client sucessfully. But I want to connect its server to a proxy.
Here is the node client:
<html>
<head>
<script src="http://localhost:8000/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
var name = '';
var socket = io.connect('http://localhost:8000');
// at document read (runs only ones).
$(document).ready(function(){
// on click of the button (jquery thing)
// the things inside this clause happen only when
// the button is clicked.
$("button").click(function(){
// just some simple logging
$("p#log").html('sent message: ' + $("input#msg").val());
// send message on inputbox to server
socket.emit('chat', $("input#msg").val() );
// the server will recieve the message,
// then maybe do some processing, then it will
// broadcast it again. however, it will not
// send it to the original sender. the sender
// will be the browser that sends the msg.
// other browsers listening to the server will
// recieve the emitted message. therefore we will
// need to manually print this msg for the sender.
$("p#data_recieved").append("<br />\r\n" + name + ': ' + $("input#msg").val());
// then we empty the text on the input box.
$("input#msg").val('');
});
// ask for the name of the user, ask again if no name.
while (name == '') {
name = prompt("What's your name?","");
}
// send the name to the server, and the server's
// register wait will recieve this.
socket.emit('register', name );
});
// listen for chat event and recieve data
socket.on('chat', function (data) {
// print data (jquery thing)
$("p#data_recieved").append("<br />\r\n" + data.msgr + ': ' + data.msg);
// we log this event for fun :D
$("p#log").html('got message: ' + data.msg);
});
</script>
</head>
<body>
<input type="text" id="msg"></input><button>Click me</button>
<p id="log"></p>
<p id="data_recieved"></p>
</body>
</html>
Here is Server:
var check="check";
var io = require('socket.io').listen(8000);
// open the socket connection
io.sockets.on('connection', function (socket) {
// listen for the chat even. and will recieve
// data from the sender.
console.log('hello nahid');
socket.on('chat', function (data) {
// default value of the name of the sender.
var sender = 'unregistered';
check=sender;
// get the name of the sender
socket.get('nickname', function (err, name) {
console.log('Chat message by ', name);
console.log('error ', err);
sender = name;
});
// broadcast data recieved from the sender
// to others who are connected, but not
// from the original sender.
socket.broadcast.emit('chat', {
msg : data,
msgr : sender
});
});
// listen for user registrations
// then set the socket nickname to
socket.on('register', function (name) {
// make a nickname paramater for this socket
// and then set its value to the name recieved
// from the register even above. and then run
// the function that follows inside it.
socket.set('nickname', name, function () {
// this kind of emit will send to all! :D
io.sockets.emit('chat', {
msg : "naay nag apil2! si " + name + '!',
msgr : "mr. server"
});
});
});
});
They work well together. Now I want to have included server file into another html client like this:
<script type="text/javascript" src="nodeServer.js"></script>
In order to access variables in nodeServer.js. But The error "Uncaught ReferenceError: require is not defined "
What can I do to solve this and also I have this line code :
such that it knows what socket.io syntax is. But the error exists.
What should I do to make my html file know socket.io.js.
EDIT:
The last comment on the checked answer is what solved my issue. Thanks to #Houseman.
I'm pretty sure you can't just throw a Node.js file into a html DOM and expect it to work. Node.js files are run by Node.js, not by client-side html javascript.
This line <script src="http://localhost:8000/socket.io/socket.io.js"></script> is sufficient for loading the io object into your DOM, and make it accessible through javascript.
Remove this line:
<script type="text/javascript" src="nodeServer.js"></script>
, and you should be fine, if your server is running on port 8000. Your server code, however, doesn't seem to have the necessary components to actually run.
EDIT:
If you want to pass variables from your client to your server, or the other way around, use sockets, just like you're already doing.
I'm working on browser javascript xmpp client that connects anonymously to my server.
But when a user reloads the page or leaves it and subsequently returns to it I need
to reconnect to the server with the same anonymous account. How can I do this?
I'm using Strophe library (xmpp over bosh). So I already tried to do the following:
connection.connect(jid, "", onConnect);
this results in failure response from server:
<body xmlns='http://jabber.org/protocol/httpbind'>
<failure xmlns="urn:ietf:params:xml:ns:xmpp-sasl">
<not-authorized/></failure>
</body>
and also:
connection.attach(jid, sid, rid, onConnect);
where jid, rid and sid are from cookies in both cases.
The second method is ok, but I can't manage with rid parameter correctly in all popular browsers.
Another approach is to use XEP-0077: "In-Band Registration" to create a brand new JID of the form [UUID]#yourhost on first login, with random password, then log back in to that account when you need to reconnect. Sweep through and delete the unused accounts periodically.
You can do it using jQuery (see $(document).ready). The example bellow uses Strophe for establishing BOSH communication to the XMPP server. The user joins the MUC room.
function onConnect(status) {
if (status == Strophe.Status.CONNECTED) {
var joined = false;
var participants = {};
$('#events').html('<text class="textmainleft">XMPP connection established. Ready to rock n roll!</text>');
connection.send($pres().c('priority').t('-1'));
connection.addHandler(notifyUser, null, 'message', 'groupchat', null, null);
connection.send(
$pres({
to: '[% groupchatroom %]#xmppserver.dom/' + "[% nickname %]"
}).c('x', {xmlns: 'http://jabber.org/protocol/muc'}));
} else if (status == Strophe.Status.AUTHFAIL) {
$(location).attr('href', AUTHFAIL_URL);
} else if (status == Strophe.Status.CONNFAIL) {
$(location).attr('href', AUTHFAIL_URL);
}
}
$(document).ready(function () {
var user_id = [% user_id %];
connection = new Strophe.Connection(BOSH_SERVICE);
connection.connect( "[% jid %]", "[% password %]", onConnect);
// Additional custom code goes here
});