前端开发者| web前端手机端开发环境 |
| web前端开发环境 |
| 前端开发环境搭建 |
| 前端搭建开发环境 |
H5新增比较牛逼的不止canvas 还有webscoket 可以实现即时通讯 ，这次小白就用node.js实现以下，话不多说，先上代码
本文适合有node.js基础的人学习。
首先创建webscoket 在命令行收入npm install nodejs-websocket。等待安装之后先复制下面代码.具体代码意思后面解释
//index.js
javascript 代码
var ws = require(‘nodejs-websocket’)
console.log(‘开始建立连接…’)
var game1 = null,
game2 = null,
game1Ready = false,
game2Ready = false
var server = ws
.createServer(function(conn) {
conn.on(‘text’, function(str) {
console.log(‘收到的信息为:’ + str)
if (str === ‘game1’) {
game1 = conn
game1Ready = true
conn.sendText(‘success’)
}
if (str === ‘game2’) {
game2 = conn
game2Ready = true
}
if (game1Ready && game2Ready) {
game2.sendText(str)
}
conn.sendText(str)
})
conn.on(‘close’, function(code, reason) {
console.log(‘关闭连接’)
})
conn.on(‘error’, function(code, reason) {
console.log(‘异常关闭’)
})
})
.listen(8001)
console.log(‘WebSocket建立完毕’)
game1.html
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style>
.kuang {
text-align: center;
margin-top: 200px;
}
#mess {
text-align: center;
}
.value {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
line-height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<div id=”mess”>正在连接…</div>
<div class=”kuang”>
<div class=”value” id=”value1″>小明小明</div>
<div class=”value” id=”value2″>大胸大胸</div>
<div class=”value” id=”value3″>小张小张</div>
</div>
<script>
var mess = document.getElementById(‘mess’)
if (window.WebSocket) {
var ws = new WebSocket(‘ws://127.0.0.1:8001’)
ws.onopen = function(e) {
console.log(‘连接服务器成功’)
ws.send(‘game1’)
}
ws.onclose = function(e) {
console.log(‘服务器关闭’)
}
ws.onerror = function() {
console.log(‘连接出错’)
}
ws.onmessage = function(e) {
mess.innerHTML = ‘连接成功’
document.querySelector(‘.kuang’).onclick = function(e) {
var time = new Date()
ws.send(
time + ‘ game1点击了“’ + e.target.innerHTML + ‘”’,
)
// ws.send(1);
}
}
}
</script>
</body>
</html>
//game2.HTML
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style>
.kuang {
text-align: center;
margin-top: 200px;
}
#mess {
text-align: center;
}
</style>
</head>
<body>
<div id=”mess”></div>
<script>
var mess = document.getElementById(‘mess’)
if (window.WebSocket) {
var ws = new WebSocket(‘ws://127.0.0.1:8001’)
ws.onopen = function(e) {
console.log(‘连接服务器成功’)
ws.send(‘game2’)
}
ws.onclose = function(e) {
console.log(‘服务器关闭’)
}
ws.onerror = function() {
console.log(‘连接出错’)
}
ws.onmessage = function(e) {
var time = new Date()
mess.innerHTML += time + ‘的消息：’ + e.data + ‘<br>’
}
}
</script>
</body>
</html>
可以先观看效果 node index 或者node.index.js 具体webscoket实现即时通讯的原理就是，客服端向服务端请求一次并且保存记录，webscoket的作用就在这里 他可以让服务端主动给客服端发送信息，就是第一次访问，之后服务器如果有新信息的话可以主
像客户端发送信息.webscoket比ajax轮询的好处是减少资源，并且不用一直访问数据下面讲下ajax轮询
AJAX轮询：每N秒请求一次比如：
客户端：有数据么？
服务端：没有。
客户端：有数据么？
服务端：没有。
客户端：有数据么？
服务端：没有。
客户端：有数据么？
服务端：有，给你……
这样会浪费好多的资源
现在webscoket的原理是：
客户端：有数据的话发给老子.别让我催
服务端：好的哥,
服务端： 你好啊 （新数据）
服务端： 吃饭了么 （新数据）
一次访问 建立连接 以后都可以用
| 前端开发环境和生产环境搭建 |
| web前端开发需安装啥环境 |
| 前端开发环境部署 |
| 前端开发环境推荐 |
» 本文来自：前端开发者 » 《Node.js + WebScoket实现即时通讯》
» 本文链接地址：https://www.rokub.com/6784.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册