代码之家 › 专栏 › 技术社区 › Sterling Butters

SocketIO:Node.js与浏览器客户端js通信

socket.io server sockets node.js javascript

Sterling Butters · 技术社区 · 6 年前

我试图在节点服务器和浏览器客户端之间双向发送数据。

节点 `server.js`

var express = require('express')
var app = express();
var http = require('http').Server(app);
var socketTx = require('socket.io')(http);

app.use(express.static(__dirname + '/'))

http.listen(3000, function(){
  console.log('listening on http://127.0.0.1:3000');
});

// 1) Send initial data from node to browser
setInterval( function() {
  var msg = Math.random();
  socketTx.emit('Node', msg);
}, 1000);

var io = require('socket.io-client');
var socketRx = io.connect('http://localhost:3000', {reconnect: true});

// 4) Receive data from browser and log in node console
socketRx.on('Browser', function(msg){
  console.log(msg);
});

`index.html`

<html>
<head></head>

<body>
  <div id="message"></div>
  <script src="/socket.io/socket.io.js"></script>
  <script src="socket.js"></script>
</body>
</html>

浏览器 `socket.js`

var socketRx = io();
var socketTx = io();

// 2) Receive initial data from node and display in browser
socketRx.on('Node', function(msg){
  document.getElementById("message").innerHTML = msg;

  // 3) Send data from browser back to node
  socketTx.emit('Browser', msg);
});

1 回复 | 直到 6 年前

kuromoka 6 年前

我不熟悉socket.io,如果有错误,请原谅。
this official document ,我修好了 server.js 如下所示。
它在我的环境中工作得很好。请尝试此代码。

var express = require('express')
var app = express();
var http = require('http').Server(app);
var socketTx = require('socket.io')(http);

app.use(express.static(__dirname + '/'))

http.listen(3000, function(){
  console.log('listening on http://127.0.0.1:3000');
});

// 1) Send initial data from node to browser
setInterval( function() {
  var msg = Math.random();
  socketTx.emit('Node', msg);
}, 1000);

var io = require('socket.io-client');
io.connect('http://localhost:3000', {reconnect: true});

// 4) Receive data from browser and log in node console
socketTx.on('connection', function(socket) {
  socket.on('Browser', function(msg){
    console.log(msg);
  });
});

推荐文章

user433342 · 流式传输SheetJS-xlsx以在节点中形成数据

4 月前

servvs · 如何从javascript中的另一个类回调读取修改后的类属性?

5 月前

Vanortton · 使用Docker开始应用程序开发还是在开发过程中配置Docker?[关闭]

5 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

5 月前

LifeAsPixels · 试图使用Node.js读取我的本地html文件时,此错误的来源是什么?

5 月前

Josue Abotsidia · 创建NextJS项目时出错

5 月前

Soon Winner · TypeError:superheroes.random在使用“超级英雄”npm包时不是函数[关闭]

5 月前

Null Salad · 如何使用postgresql和nodejs将变量安全地插入数组?

6 月前

Zak · 令牌认证路由的页面刷新重定向到React中的404页面

6 月前

DSATH · 我的lambda在代码完成之前就结束了,我不知道为什么

6 月前

SocketIO:Node.js与浏览器客户端js通信

节点 server.js

index.html

浏览器 socket.js

节点 `server.js`

`index.html`

浏览器 `socket.js`