Can't seem to connect to pusher. I've been working in these for days and can't seem to connect to pusher. version 6.0.3
import Pusher from 'pusher-js/react-native';
componentDidMount() {
this.willFocusSubscription = this.props.navigation.addListener(
'willFocus',
() => {
try {
this.pusher = new Pusher('key', {
wsHost: 'host',
wsPort: 6001,
enabledTransports: ['ws'],
disableStats:true,
});
Pusher.log = (msg) => {
console.log('Pusher message ' + msg);
};
} catch (error) {
console.log('error', error)
}
this.group_channel = this.pusher.subscribe('groupchat.' + session_id);
this.pusher.connection.bind('GroupMessageSent', (data) => {
console.log('connected', data)
});
this.group_channel.bind('GroupMessageSent', (data) => {
console.log('data', data)
});
})
}
Pusher message Pusher : : ["Connecting",{"transport":"xhr_polling","url":"https://sockjs-4444.pusher.com:443/pusher/app/DOCKOTO_KEY?protocol=7&client=js&version=6.0.3"}]
https://snack.expo.io/#jsfit/pusher
I have checked the pusher is working fine for me on the localhost
the main reason I think is your ws ws://test.dockoto.com:6001
Laravel WebSockets default port 6001 as you know but you still need to open the port on the server.
Shared hosting I think you have to contact with you hosting provider to open the port if needed
EC2:
https://stackoverflow.com/a/56667321/13647574
Related
I am trying to connect my react application to HiveMQ using mqtt.js package but I am having this error.
This is the code I used
useEffect(() => {
const options: IClientOptions = {
protocol: "ws",
username: "myfirstdevice",
password: "qweqwe123",
};
const client = mqtt.connect('ws://8dedd20fc1164c8e9ce132a8a8359991.s1.eu.hivemq.cloud:8884', options);
// const client = mqtt.connect(options);
client.on('connect', function () {
console.log('Connected');
});
client.on('error', function (error) {
console.log("ERROR", error);
});
client.on('message', (topic,message,packet)=>{
console.log("RECEIVE", topic)
console.log("RECEIVE", message)
console.log("RECEIVE", packet)
});
}, []);
Port 8884 is for MQTT over Secure WebSockets
You'll need to change the URL to start with wss:// not ws://
I have a chat app I made using React for the frontend, DRF for the backend and I also have a node.js server within the React app for socket.io The issue is that the chat doesn't work basically (it works fine locally). When a message is sent it's not emitted and only shows up when I refresh since it's then pulled from the DB instead. I have gone through many threads on here for this issue but can't figure out what I'm doing wrong.
My server:
const server = require("http").createServer();
const io = require("socket.io")(server, {
cors: {
origin: "*",
},
});
const PORT = process.env.PORT || 5000;
const NEW_CHAT_MESSAGE_EVENT = "newChatMessage";
io.on("connection", (socket) => {
console.log('Client connected')
// Join a conversation.
const {roomId} = socket.handshake.query;
socket.join(roomId);
// Listen for new messages
socket.on(NEW_CHAT_MESSAGE_EVENT, (data) => {
io.in(roomId).emit(NEW_CHAT_MESSAGE_EVENT, data);
});
// Leave the room if the user closes the socket
socket.on("disconnect", () => {
socket.leave(roomId);
});
});
server.listen(PORT, (error) => {
if (error) throw error;
console.log(`Listening on port ${PORT}`);
});
Hook I made for the frontend:
const NEW_CHAT_MESSAGE_EVENT = "newChatMessage"; // Name of the event
const SOCKET_SERVER_URL = `https://<my-react-frontend>.herokuapp.com`;
export const useChat = () => {
const socketRef = useRef();
const {messages, setMessages, activeConvo, headerConvo, reloadSideBar, setReloadSideBar} = useActiveConvo()
const roomId = activeConvo
useEffect(() => {
console.log('useChat useEffect ran')
// Creates a WebSocket connection
socketRef.current = socketIOClient(SOCKET_SERVER_URL, {
query: {roomId},
});
// Listens for incoming messages
socketRef.current.on(NEW_CHAT_MESSAGE_EVENT, (message) => {
const incomingMessage = {
message: message.body,
created_by: localStorage.getItem('currentUserID'),
};
console.log('messages set in useChat useFfect')
setMessages((messages) => [...messages, incomingMessage]);
});
// Destroys the socket reference
// when the connection is closed
return () => {
socketRef.current.disconnect();
};
}, [roomId]);
// Sends a message to the server that
// forwards it to all users in the same room
const sendMessage = (messageBody) => {
socketRef.current.emit(NEW_CHAT_MESSAGE_EVENT, {
body: messageBody,
senderId: socketRef.current.id,
});
const fetchContents = {
message: messageBody,
created_by: localStorage.getItem('currentUserID'),
convo_id: activeConvo ? activeConvo : headerConvo
}
fetch(`https://<my-drf-backend>.herokuapp.com/api/save-message/`, authRequestOptions(('POST'), fetchContents))
.then(response => response.json())
.then(setReloadSideBar(reloadSideBar + 1))
.catch(error => console.log(error))
};
return {messages, sendMessage};
};
The issue in most of the threads appeared to be either still using the localhost url on the frontend or not using process.env.PORT in the server but it's still busted after fixing that. I also saw someone mention in another thread that the folder structure was the issue so I tried having the server file in the root of the react app and having it in it's own folder under "src", no dice.
In case anyone faces this same issue, I solved it by putting the server in a separate app on heroku
I am tying to implement socket connection in ReactJs, I have read there documentation for how to implement more than one namespace in socket and this is how I did it after following there instructions
import {Manager} from "socket.io-client";
export const manager = new Manager(process.env.REACT_APP_SOCKET_API, {
transports: ["websocket"],
reconnection:true,
autoConnect:true,
});
// add the namespace [namespace1,namespace2]
export const chatSocket = manager.socket("/namespace1");
export const notesSocket = manager.socket("/namespace2");
manager.open((err) => {
if (err) {
console.log("socket connection error", err);
} else {
console.log("socket connection succeeded");
}
});
now I am trying to use it like that in my react app is this right or I should use it in another way because I don't see any result from my console.log mehtod
useEffect(() => {
chatSocket.on('connect',() => {
console.log('connected socket chat')
})
notesSocket.on('connect',() => {
console.log('connected socket notes')
})
},[])
I am working on a project for an interview and have been asked to create a NextJS app using Socket.io for realtime chat. I have the chat functionality working, but one of my requirements is to have an area where a user can see a list of current users. While I've found examples for Express servers, I cannot seem to work out how to do this using Next's API system. I have two connected issues:
Maintaining a list of users with chosen display names (not just the socket id)
Accessing and returning a current user list whenever a user joins or leaves.
I haven't had any luck scanning the docs.
Here is the server function:
import { NextApiRequest } from 'next';
import { NextApiResponseServerIO } from '../../types/next';
import { Server as ServerIO } from 'socket.io';
import { Server as NetServer } from 'http';
export const config = {
api: {
bodyParser: false
}
}
export default async (req: NextApiRequest, res: NextApiResponseServerIO) => {
if (!res.socket.server.io) {
console.log("** New Socket.io server **")
// adapts the Next net server to http server
const httpServer: NetServer = res.socket.server as any;
const io = new ServerIO(httpServer, {
path: '/api/socketio'
})
io.on('connect', async (socket) => {
socket.join('main')
// where I plan to put the code to send a current list
})
io.on('disconnect', socket => {
socket.leave('main')
})
res.socket.server.io = io;
}
res.end();
}
And the related client code:
useEffect((): any => {
const url = process.env.NEXT_BASE_URL as string | "";
// connect to socket server
const socket = io(url, {
path: "/api/socketio",
});
// log socket connection
socket.on("connect", () => {
dispatch(connect(socket.id));
dispatch(updateId(socket.id))
});
//updates chat on message dispatch
socket.on("message", (message: IMsg) => {
dispatch(receive(message));
});
socket.on('updateUsersList', (users) => {
console.log("Is this the users", users)
})
//server disconnect on unmount
if (socket) return () => dispatch(disconnect(socket));
}, []);
While trying to connect my React client to Spring boot web socket server. I am getting this error while socket connection, but seems like the messages are sent. I am completely clueless what's happening here and could some one please explain and suggest a solution.
configureSocket = async (channel_id) => {
var socket = new socketClient(SERVER+'/chat')
var stompClient = stompjs.over(socket)
stompClient.connect({}, (frame)=>{
console.log("Connected to: "+frame)
stompClient.subscribe("/chat/messages/"+channel_id, (response) => {
let data = JSON.parse(response.body)
console.log(data)
} )
})
this.socket = socket
this.stompClient = stompClient
}
handleSendMessage = async (channel_id, text, from) => {
await this.configureSocket(channel_id);
this.stompClient.send("/app/chat/"+channel_id, {}, await JSON.stringify({
'from': from,
'message': text
}))
}