用户投稿
嗨，各位好我是 Robin ~
你有想过为什么有些网站的资料，
你明明没有重新整理资料那些资料却会自己更新吗？
(例如一些虚拟货币交易所的汇率或是一些股票市场的价格走势)
答案是他们直接用 Javascript 做在前端直接 Random 或是写死啊！
没有在跟后端要资料的啦！
开玩笑的
(不过大部分诈骗网站或是一些主要以饥饿行销手法的网站都是这样做)
比方说...
网页上显示超值特价限时 10 分钟，然后时间正在一分一秒流逝，
当你脑波一微弱单子就出去了，
但是当你下单完成回头重新整理一次 10 分钟又重新计算了，
想必你的心情会是...
基本上 Socket.io 他就是基于 EventEmitter 来提供给 Client 端来使用 Websocket。
如果还不知道 EventEmitter的同学可以参考我之前写的文章，
让你轻鬆且快乐的学习~
【我可以你也可以的Node.js】第七篇 - 第一次用EventEmiter就用来做坏坏的事ヽ(́◕◞౪◟◕‵)ﾉ
其实操作方面主要也只有两个
就跟 EventEmitter 一样几乎都围绕在 on 和 emit，
先看一下成果~
基本上我就只是后端建立完连线之后，
每秒从后端送出一笔乱数让前端 show 出来。
那我们干话继续说直接看 Code 吧
建立一个 socket.js
const http = require("http");const url = require('url');const fs = require('fs');const io = require('socket.io');const server = http.createServer(function(request, response) { console.log('Connection'); const path = url.parse(request.url).pathname; switch (path) { case '/': response.writeHead(200, { 'Content-Type': 'text/html' }); response.write('I don\'t need to reload~'); response.end(); d break; case '/socket.html': fs.readFile(__dirname + path, function(error, data) { if (error) { response.writeHead(404); response.write("opps this doesn't exist - 404"); } else { response.writeHead(200, { "Content-Type": "text/html" }); response.write(data, "utf8"); } response.end(); }); break; default: response.writeHead(404); response.write("opps this doesn't exist - 404"); response.end(); break; }});server.listen(8080);const serv_io = io.listen(server);serv_io.sockets.on('connection', function(socket) { setInterval(() => { socket.emit('randomNum', { 'message': Math.random() * 100 }); }, 1000)});这边主要的重点在这段
const serv_io = io.listen(server);serv_io.sockets.on('connection', function(socket) { setInterval(() => { socket.emit('randomNum', { 'message': Math.random() * 100 }); }, 1000)当连线连上之后设定定时器一秒钟送出一个 randomNum的事件出去。
接着，建立一个 socket.html
<html><head> <script src="/socket.io/socket.io.js"></script></head><body> <script> var socket = io.connect(); socket.on('randomNum', function(data) { console.log(data.message); document.getElementById('viewText').innerText = `I don't need to reload~\n${data.message}`; }); </script> <p id=viewText> I don't need to reload~ </p></body></html>这边主要的重点是在于前端透过 socket.io 接收到 randomNum 这个事件然后更新 tag p 的内容。
所以由此可知，这年头景气不好啊卖东西都要搞心理战了(重点错误)
希望以上範例可以让正在读的你能更好理解其实要实作 websocket 让网页动态呈现资料不是那么难的一件事。
但也许是我还碰得不够深xD
感觉这部分可以有很多的应用，
像我第一个想法就是可以透过这个来做个聊天室，
如果正在读的你不知道他能干嘛，
不仿想想看如何用利用这个实作一个专案，
让你不仅能更理解还能获得成就感。
也许你就能...
升职加薪
当上总经理
出任ceo
迎娶白富美
走上人生巅峰
以上
感谢您的阅览
参考资料
且战且走HTML5(3) 使用Socket.io
使用 Node.js 与 Socket.IO 建立即时性（Realtime）网页应用程式 App
微信扫一扫打赏
支付宝扫一扫打赏
