yezihaohao / Notification
notification with socket.io
Stars: ✭ 24
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Notification
Hackflowy
📓 Workflowy clone, built using Backbone.js & Socket.io
Stars: ✭ 772 (+3116.67%)
Mutual labels: socket-io
Laravel Event Broadcast
Laravel event broadcasting with Node.js, Redis & Socket.io
Stars: ✭ 5 (-79.17%)
Mutual labels: socket-io
Libfastcommon
c common functions library extracted from my open source project FastDFS. this library is very simple and stable. functions including: string, logger, chain, hash, socket, ini file reader, base64 encode / decode, url encode / decode, fast timer, skiplist, object pool etc. detail info please see the c header files.
Stars: ✭ 739 (+2979.17%)
Mutual labels: socket-io
Front End Career
A career guide to Front End Developers
Stars: ✭ 765 (+3087.5%)
Mutual labels: front-end
Ghchat
📱A chat application for GitHub. React + PWA + Node(koa2) + Typescripts + Mysql + Socket.io
Stars: ✭ 791 (+3195.83%)
Mutual labels: socket-io
Must Know About Frontend
🎓 취준생이라면 반드시 알아야 하는 프론트엔드 관련 지식들
Stars: ✭ 693 (+2787.5%)
Mutual labels: front-end
Inotify
📢 JS achieve the browser title flashing, scrolling, voice prompts, Chrome/Safari/FireFox/IE notice. has no dependencies. It not interfere with any JavaScript libraries or frameworks. has a reasonable footprint 5.05kb (gzipped: 1.75kb)
Stars: ✭ 892 (+3616.67%)
Mutual labels: notification
Snapchat Clone
👻 A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!
Stars: ✭ 770 (+3108.33%)
Mutual labels: front-end
React Toastify
React notification made easy 🚀 !
Stars: ✭ 8,113 (+33704.17%)
Mutual labels: notification
Frontend Challenges
💥 Listing some playful open-source's challenges of companies to test your knowledge
Stars: ✭ 7,211 (+29945.83%)
Mutual labels: front-end
Neteasecloudmusic
React Native 模仿网易云音乐手机客户端，兼容安卓和IOS两个平台。
Stars: ✭ 793 (+3204.17%)
Mutual labels: front-end
Battery notifier
Send an alarm to notification daemon if battery percentage become lower than a threshould
Stars: ✭ 16 (-33.33%)
Mutual labels: notification
Slim.js
Fast & Robust Front-End Micro-framework based on modern standards
Stars: ✭ 789 (+3187.5%)
Mutual labels: front-end
Braid Design System
Themeable design system for the SEEK Group
Stars: ✭ 888 (+3600%)
Mutual labels: front-end
Computer Science
Contains the basic fundamental data structures and algorithms a front end engineer should know, written all in JavaScript.
Stars: ✭ 798 (+3225%)
Mutual labels: front-end
notification
notification with socket.io
1
npm install
2
node index.js
3
open the browser and visit http://localhost:8080/
前言
socket.io: 包含对websocket的封装，可实现服务端和客户端之前的通信。详情见官网 (虽然是英文文档，但还是通俗易懂)。 Notification: Html5新特性，用于浏览器的桌面通知，只有部分浏览器支持。 通过nodejs+Socket.io+Notification实现服务端往浏览器客户端发送自定义消息。 若有问题可加群264591039与我讨论。 转载请注明出处！
开发前提
本地安装nodejs以及npm 对nodejs以及express框架有一定了解。（本篇将和官方文档一样，采用express 4.10.2）
环境搭建
- 新建一个文件夹notification（以下操作都在该文件夹的根目录进行）
- npm初始化package.json文件
npm init - 安装express(指定版本4.10.2，没有试过其他版本，感兴趣可以试下)
npm install --save [email protected] - 安装socket.io(本人安装的版本是1.7.3)
npm install --save socket.io
编写代码
构建通信环境
在根目录下新建一个index.html（注：index页面的样式来自socket.io的官方示例）
<!doctype html>
<html>
<head>
<title>Socket.IO Notification</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
新建一个index.js文件，并在js文件中构建相应的对象和变量，创建监听端口为8080 的服务器，以及添加映射到index.html的路由。
let express = require('express'),
app = express(),
http = require('http').Server(app),
io = require('socket.io')(http);
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res){
res.sendfile('index.html');
});
http.listen(8080, function(){
console.log('listening on port 8080');
});
运行 node index.js 用浏览器打开http://localhost:8080 成功的话即可看到index.html页面的内容。
在index.js的监听端口代码上方添加socket.io的监听事件，监听用户连接的connection。
io.on('connection', function(socket){
console.log('a user connected');
});
创建监听Event事件:notification，并用emit向客户端推送消息
io.on('connection', function(socket){
console.log('a user connected');
socket.on('notification', function(msg){
console.log(msg);
io.emit('notification', msg);
});
});
在index.html页面中的
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].