I'm trying to use React Native's built in Websocket support. I have this code:
var hostname = "192.168.X.XXX";
var port = "4567";
const webSocket = new WebSocket("ws://" + hostname + ":" + port + "/chat");
and I have this:
componentWillMount: function(){
console.log("MOUNTING CHAT COMPONENT");
webSocket.onopen = function(){
console.log("binding to chat room");
bindToChatRoom();
setTimeout(keepWebSocketOpen, 30000);
ws_connected = true;
};
webSocket.onmessage = function (msg) {
this.handleMsg(msg);
};
webSocket.onclose = function () {
console.log("WebSocket connection closed");
ws_connected = false;
};
webSocket.onerror = function (e){
//add some error handling -> DO THIS
console.log(e.message);
};
},
I'm running a local server using sparkjava, with this:
webSocket("/chat", ChatWebSocketHandler.class);
etc. I've tested the server, and I can connect to it (and send messages) both through both my web browser on my laptop AND on my phone with URL 192.168.x.xxx:4567/chat . However, when I run the react native app, I never see the console message "binding to chat room". Am I missing something? How come this websocket never opens?
Just want to note, I also tried connecting here:
ws://echo.websocket.org
which is described here:
http://www.websocket.org/echo.html
This is a known working websocket, so I know it's purely a react native issue...
Turns out that I had the line of code
const webSocket = new WebSocket("ws://echo.websocket.org");
in the wrong place. If you move it into componentWillMount, it works just fine.
Related
I am trying to set up a very basic Socket.IO server and a .NET / Firecamp client to learn how to send events between the two.
My Javascript Socket.IO server is set up like this:
const
http = require("http"),
express = require("express"),
socketio = require("socket.io");
const app = express();
const server = http.createServer(app);
const io = socketio(server);
const SERVER_PORT = 3000;
io.on("connection", () => {
console.log("Connected");
io.emit("foo", "123abc");
});
server.listen(SERVER_PORT);
I am able to connect with a simple Socket.IO Javascript file:
const
io = require("socket.io-client"),
ioClient = io.connect("http://localhost:3000");
ioClient.on('connect', () => {
console.log("connected");
});
When I try to connect with Firecamp or this C# library I never see a connection event fired.
I looked at the default options for the Socket.IO JS client and tried to reproduce them in Firecamp: https://socket.io/docs/v3/client-api/index.html
The most important ones seem to be the Path= /socket.io, ForceNew = True, and Transports = polling, websocket. I decided to remove the polling transport because I kept getting an XHR polling error, but the websocket also times out in both C# and Firecamp.
I have tried connecting to "http://localhost:3000" and just "http://localhost".
Here is a screenshot of my Firecamp settings
I am also seeing a similar issue with my C# program
Quobject.Collections.Immutable.ImmutableList<string> trans = Quobject.Collections.Immutable.ImmutableList.Create<string>("websocket");
IO.Options options = new IO.Options();
options.Port = 3000;
options.Agent = false;
options.Upgrade = false;
options.Transports = trans;
client = IO.Socket("http://localhost:3000", options);
client.On(Socket.EVENT_CONNECT, () =>
Console.WriteLine("Connected"));
client.On(Socket.EVENT_CONNECT_ERROR, (Data) => Console.WriteLine("Connect Error: " + Data));
client.On(Socket.EVENT_CONNECT_TIMEOUT, (Data) => Console.WriteLine("Connect TImeout Error: " + Data));
client.On(Socket.EVENT_ERROR, (Data) => Console.WriteLine("Error: " + Data));
client.Connect();
If I only use a websocket transport I timeout in both Firecamp and C#. If I enable polling I receive the below error:
Error: Quobject.EngineIoClientDotNet.Client.EngineIOException: xhr poll error ---> System.AggregateException: One or more errors occurred. ---> System.Net.WebException: The remote server returned an error: (400) Bad Request.
at System.Net.HttpWebRequest.GetResponse()
at Quobject.EngineIoClientDotNet.Client.Transports.PollingXHR.XHRRequest.<Create>b__7_0()
at System.Threading.Tasks.Task.InnerInvoke()
at System.Threading.Tasks.Task.Execute()
--- End of inner exception stack trace ---
at System.Threading.Tasks.Task.ThrowIfExceptional(Boolean includeTaskCanceledExceptions)
at System.Threading.Tasks.Task.Wait(Int32 millisecondsTimeout, CancellationToken cancellationToken)
at Quobject.EngineIoClientDotNet.Client.Transports.PollingXHR.XHRRequest.Create()
--- End of inner exception stack trace ---
What other configuration settings can I toggle to try to get my Firecamp or C# connection to show up in my JS Server? I am receiving an "XHR Poll error" from the polling transport, and a timeout from the websocket transport. Is there additional debugging info somewhere I can use to determine where my problem lies? I think if I can get the communication working in either Firecamp or C# I should be able to get it working in the other environment.
I am assuming you're using the SocketIO v3 client. Firecamp is only supporting SocketIO v2. But the good news is in just two days Firecamp is going to give support for SocketIO v3 in the new canary release. I'll keep you posted here.
edited on 7th Sep'21
Firecamp is now supporting SocketIO v2, v3, and v4.
As mentioned above, Firecamp isn't optimized yet for the new version of Socket.IO (v4).
so meanwhile you can choose to manually enable compatibility for Socket.IO v2 clients.
All you have to do is to add "allowEIO3: true" (without quotes) as a key:value pair to the option object and pass this object when you create the server.
this will allow you to communicate with the server via Firecamp.
source https://socket.io/docs/v4/server-api/#Server
below you'll find an example for a working socket.io server integrated with express server.
const app = require('express')();
const httpServer = require('http').createServer(app);
const options = {
allowEIO3: true,
};
const io = require('socket.io')(httpServer, options);
app.get('/', (req, res) => {
res.send('home endpoint');
});
io.on('connection', (socket) => {
socket.on('new-connection', (data) => {
console.log(socket.id, 'connected');
socket.broadcast.emit('test-event', { name: data.name });
});
// when the user disconnects.. perform this
socket.on('disconnect', () => {
console.log(`${socket.id} disconnected`);
});
});
const port = 3000;
httpServer.listen(port, () => {
console.log(`server running on port ${port}`);
});
I get the following error in my chrome console.
websocket.js:111 WebSocket connection to 'ws://c7f2053b.ngrok.io/socket.io/?EIO=3&transport=websocket' failed: Invalid frame header
In my firefox i get this
The connection to ws://c7f2053b.ngrok.io/socket.io/?EIO=3&transport=websocket&sid=h1U3iQ9b3INSkg9xAAAC was interrupted while the page was loading.
Is there anyway to clear this issue please suggest me ...
Please check
1) Chrome and Firefox versions. Older versions might not have full support for WebSockets
What browsers support HTML5 WebSocket API?
2) Test Basic code :: Try with regular JavaScript Code first and see if connection is establishing:-
websocket = new WebSocket(URL);
websocket.onopen = function(evt) {
alert("Connected...");
websocket.send(message);
websocket.onmessage = function(evt) {
alert(evt.data);
};
websocket.onclose = function(evt) {
alert(evt.data);
};
websocket.onerror = function(evt) {
alert(evt.data);
};
I want to use the websocket in my RN project. And I did it using the ws at server side and the RN built-in websocket implementation.
But it seems not so convinient since I use socket.io before.
So I tried to use socket.io:
In RN:
import './userAgent'
import io from "socket.io-client/socket.io"
In component:
componentDidMount() {
this.socket = io('https://localhost:4080',{jsonp: false});
this.socket.on('hello', (msg) =>{
this.setState({response:msg})
});
}
In the server:
io.on('connection', function(socket){
socket.emit('hello','hello world')
console.log('a user connected');
socket.on('disconnect',function(){
console.log('user disconnected')
})
})
And in userAgent.js
window.navigator.userAgent = 'react-native';
That is just the result I googled and they said it will work. But for me, the chrome debugger stopped at:
function load() {
var r;
try {
r = exports.storage.debug;
} catch(e) {}
return r;
}
And it says the storage is not defined.
Then I looked into the socket.io.js and find that the exports.storage is window.localStorage. So I disabled the remote js debug, and the code began running.
But the server continues to log : a user connected . as if my RN app is keeping on connecting to the server. And it seems the socket.on() did not work at client side.
react-native version:0.27.2
socket.io-client version:1.4.8
Anyone knows where is going wrong?
Well,finally I found the solution after looking through the socket.io source.
It seems that the socket.io does not use 'websocket' as transport defaultly. It will use the 'polling' in my case, so just explicityly set it :
componentDidMount() {
var socket = io('http://localhost:4080', { jsonp: false, transports: ['websocket'] })
socket.on('hello', (msg) => {
//do something
});
}
Now it works.
But what still confuses me is that in brower client I do not set the transports and it just work well but in react-native it doesn't. Not figured out why.
I am using websockets in my laravel project. I have opened a port by PHP that is 8000 and it is working fine. I am connecting to the port by following in in view file:
function WebSocketInit()
{
if ("WebSocket" in window)
{
// Let us open a web socket
ws = new ReconnectingWebSocket("ws://xxx.xxx.xxx.xxx:8000");
}
else
{
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
}
WebSocketInit();
ws.onopen = function(){
console.log( "Connected." );
};
ws.onclose = function(){
ws.refresh();
console.log( "Disconnected." );
};
It connects well first time but if I refresh my page then it disconnects and do not re-connect most of the time. Sometimes, it connects but takes few seconds. Any help will be appreciated.
Thanks in advance!
So i've built a simple websocket client implementation using Haxe NME (HTML5 target ofc).
It connects to
ws://echo.websocket.org (sorry no link, SO sees this as an invalid domain)
which works perfectly!
(i'm using xirsys_stdjs haxelib to use the HTML5 websocket stuff.)
I want to have a local (on my own machine) running websocket server.
I'm using Socket.io at the moment, because i cannot find an easier / simpler solution to go with.
I'm currently trying to use socket.io as socket server, but a 'standard' javascript socket implementation as client (Haxe HTML5), without using the socket.io library clientside.
Does anyone know if this should be possible? because i cannot get it working.
Here's my socket.io code:
var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
, fs = require('fs')
app.listen(1337);
function handler (req, res) {
fs.readFile(__dirname + '/client.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
// WEBSOCKET IMPLEMENTATION
io.sockets.on('connection', function (socket) {
console.log("webSocket connected...");
socket.on('message', function () {
console.log("server recieved something");
// TODO: find out how to access data recieved.
// probably 'msg' parameter, omitted in example?
});
socket.on('disconnect', function () {
console.log("webSocket disconnected.");
});
});
And here's my Haxe (client) code:
static var webSocketEndPoint:String = "ws://echo.websocket.org";
//static var webSocketEndPoint:String = "ws://localhost:1337";
...
private function initializeWebSocket ():Void {
if (untyped __js__('"MozWebSocket" in window') ) {
websocket = new MozWebSocket(webSocketEndPoint);
trace("websocket endpoint: " + webSocketEndPoint);
} else {
websocket = new WebSocket(webSocketEndPoint);
}
// add websocket JS events
websocket.onopen = function (event:Dynamic):Void {
jeash.Lib.trace("websocket opened...");
websocket.send("hello HaXe WebSocket!");
}
websocket.onerror = function (event:Dynamic):Void {
jeash.Lib.trace("websocket erred... " + event.data);
}
websocket.onmessage = function (event:Dynamic):Void {
jeash.Lib.trace("recieved message: " + event.data);
switchDataRecieved(event.data);
}
websocket.onclose = function (event:Dynamic):Void {
jeash.Lib.trace("websocket closed.");
}
}
In case the Haxe code is unclear: it's using 2 extern classes for the webSocket implementation: MozWebSocket and WebSocket. These are just typed 'interfaces' for the corresponding JavaScript classes.
websocket.io! from the same guys. sample shows exact same thing that you are asking about... and something that I spent past 20 hours searching for (and finally found!)
https://github.com/LearnBoost/websocket.io
Update: Jan 2014
The websocket.io repository has not seen any activity for about 2 years. It could be because it is stable, or it could be because it is abandoned.
The same people have another repository called engine.io. In the readme they say that this is isomorphic with websocket.io... It seems that engine.io is where all the action is these days.
https://github.com/LearnBoost/engine.io
While searching for the same thing I just found https://github.com/einaros/ws/ and its server example worked for me with my pre-existing plain javascript client.
http://socket.io/#how-to-use
At the mentioned link, down towards the bottom of the page,
the socket.io documentation demonstrates as it's last
example, how to use their module as a plain
old xbrowser webSocket server.
SERVER
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket)
{
socket.on('message', function () { });
socket.on('disconnect', function () { });
});
BROWSER
<script>
var socket= io.connect('http://localhost/');
socket.on('connect', function ()
{
socket.send('hi');
socket.on('message', function (msg)
{ // my msg
});
});
</script>
Hope that's what your looking for
--Doc