[Node.js]29. Level 6: Socket.io: Setting up Socket.io server-side & Client socket.io setup
Below we've already created an express server, but we want to start building a real-time Q&A moderation service and we've decided to use socket.io.
Require socket.io and make sure it listens for requests on the express app.
Also, print out a message to the console whenever a new socket.io client connects to the server.
app.js
var express = require('express'); var socket = require('socket.io'); var app = express.createServer(); var io = socket.listen(app); io.sockets.on('connection', function(client){ console.log("Welcome..."); });
In our html
file, load the socket.io.js
script and then use io.connect
to connect to socket.io on the server. Connect to the server at http://localhost:8080
.
Tip: the socket.io.js path you should use is /socket.io/socket.io.js
. Express knows to serve the socket.io client js for this path.
index.html
<script src="/socket.io/socket.io.js"></script> <script> // use the socket.io server to connect to localhost:8080 here var server = io.connect('http://localhost:8080'); </script>
In our client below, listen for 'question'
events from the server and call the insertQuestion
function whenever the event fires. The insertQuestion
function is already created for you, and it's placed in its own file. It expects exactly one argument - the question.
index.html
<script src="/socket.io/socket.io.js" /> <script src="/insertQuestion.js" /> <script> var server = io.connect('http://localhost:8080'); // insert code here server.on('question', function(data){ insertQuestion(data); }); </script>
insertQuestion.js
var insertQuestion = function(question){ var newQuestion = document.createElement('li'); newQuestion.innerHTML = question; var questions = document.getElementsByTagName('ul')[0]; return questions.appendChild(newQuestion); }
When a question is submitted to our server, we want to broadcast it out to all the connected clients so they can have a chance to answer it.
In the server below, listen for 'question'
events from clients and then emit the 'question
' event on all the other clients connected, passing them the question data.
var express = require('express'); var app = express.createServer(); var socket = require('socket.io'); var io = socket.listen(app); io.sockets.on('connection', function(client) { console.log("Client connected..."); // listen here client.on('question', function(question){ //All client, so it is broadcast client.broadcast.emit('question', question); }); });
In our real-time Q&A app, we want to allow each client only 1 question at a time, but how do we enforce this rule?
We can use socket.io's ability to save data on the client, so whenever a question is asked, we first want to check the 'question_asked'
value on the client. If it's not already set to true, broadcast the question and then go ahead and set the value to true.
var express = require('express'); var app = express.createServer(); var socket = require('socket.io'); var io = socket.listen(app); io.sockets.on('connection', function(client) { console.log("Client connected..."); client.on('question', function(question) { client.get('question_asked', function(err, asked){ if(!asked){ client.broadcast.emit('question', question); client.set('question_asked', true); } }); }); });
相关文章
- 今日头条&58转转笔试
- 前端学习 -- Html&Css -- 层级和透明度
- [RxJS] Loading Spinner with busyDelayMs & busyMinDurationMs api
- [Node.js]29. Level 6: Socket.io: Setting up Socket.io server-side & Client socket.io setup
- Veeam Backup & Replication 8 安装配置
- 华为OD机试 - 最佳对手(Java & JS & Python)
- 华为OD机试 - 最多等和不相交连续子序列(Java & JS & Python)
- 华为OD机试 - 计算快递主站点(Java & JS & Python)
- 华为OD机试 - 分奖金(Java & JS & Python)
- 华为OD机试 - 任务总执行时长(Java & JS & Python)
- 华为OD机试 - 字符串解密(Java & JS & Python)
- 华为OD机试 - 开放日活动、取出尽量少的球(Java & JS & Python)
- 华为OD机试 - 冗余覆盖(Java & JS & Python)
- 华为OD机试 - 查找树中元素(Java & JS & Python)
- 华为OD机试 - 区间交叠问题(Java & JS & Python)
- 华为校招机试 - 单词重量(Java & JS & Python)
- 华为OD机试 - 数组二叉树(Java & JS & Python)
- webstorm设置作者信息&时间&文档描述(js文件里使用)
- 从零开始学_JavaScript_系列(15)——js系列<3>(转为字符串,截取字符串)
- 【nodejs原理&源码赏析(6)】深度剖析cluster模块源码与node.js多进程(下)
- hihocoder #1170 机器人 && 编程之美2015复赛
- 变化Android系统属性SystemProperties.set("sys.powerctl", "shutdown")关机分析
- js split str.split(" "); split使用方法 在某处截字符串
- TCP回放攻击 & DDoS脉冲攻击Hit and Run IoT僵尸网络 在DDoS攻击黑产领域最活跃
- 软件测试——测试执行规范&缺陷跟踪处理