您的位置：首页 > Web前端 > Node.js

Node.js项目实战-构建可扩展的Web应用(第一版)：9 WebSocket,Socket.IO和DerbyJS的实时应用程序

2018-01-12 21:48 896 查看
HTML5的WebSocket开创了实时连接的新标准。

9.1 什么是WebSocket

不同于传统的HTTP请求，WebSocket的连接是持久的，它通过在客户端和服务器之间保持双工连接，服务器的更新可以被及时推送给客户端，而不需要在客户端以一定的时间间隔去轮询。让WebSocket的思想运用到实时应用程序中的主要因素是客户端需要立即拿到服务器更新的数据。

9.2 用ws模块的例子介绍本地WebSocket和Node.js

浏览器WebSocket的实现：index.html

<html>
<head>
</head>
<body>
<input id="text" value="Hello"/>
<script type="text/javascript">
var ws = new WebSocket('ws://localhost:3000')
ws.onopen = function(event) {    //建立连接后，发送数据
ws.send('front-end message: ABC');
};
ws.onmessage = function(event) {
console.log('server message: ', event.data)
};
const el = document.getElementById('text')
el.addEventListener('input', (event)=>{
console.log(event, el)
ws.send(`your input value is ${el.value}`)
})
</script>
</body>
</html>


用ws模块的Node.js服务器实现：server.js

const WebSocketServer = require('ws').Server
const wss = new WebSocketServer({port: 3000})

wss.on('connection', (ws) => {
ws.send('XYZ')
setInterval(()=>{
ws.send((new Date).toLocaleTimeString())
}, 1000)
ws.on('message', (message) => {
console.log('received: %s', message)
})
})


9.3 Socket.IO和Express.js的例子

浏览器和服务器间的双工通信：

app.js

const http = require('http')
const express = require('express')
const path = require('path')
const logger = require('morgan')
const bodyParser = require('body-parser')

const routes = require('./routes/index')
const app = express()

// view engine setup
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'pug')

app.use(logger('dev'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))
app.use(express.static(path.join(__dirname, 'public')))

app.use('/', routes)

const server = http.createServer(app)
const io = require('socket.io').listen(server)

io.sockets.on('connection', (socket) => {
socket.on('messageChange', (data) => {
console.log(data)
socket.emit('receive', data.message.split('').reverse().join(''))
})
})

app.set('port', process.env.PORT || 3000)
server.listen(app.get('port'), () => {
console.log(`Express server listening on port ${app.get('port')}`)
})


9.4 用DerbyJS、Express.js和MongoDB搭建一个在线协作的编辑器

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航