做项目有个需求，站内信息
之前都是http定时请求，
是使用websocket还是http?
（本人之前没有做过websocket的项目）
然后看到这个回答：WebSocket 还是Http
WebSocket 最核心的是服务端的被动性，因为对于Http请求而言，每一次都是一个request和response，而对于WebSocket可以是：“小弟，你有人给你发了条消息喔你收一下！”，而无须我隔一段时间向服务端问一下：“老头，有消息吗？，有消息的话你给我”；要知道一次Http所带的信息很重（Cookie\Header etc）的好吧。 <引用自上述回答>
后来又了解到 websocket, 兼容性不好，所以准备使用下面的技术 ——Socket.io
Socket.io
WebSocket是HTML5最新提出的规范，虽然主流浏览器都已经支持，但仍然可能有不兼容的情况，为了兼容所有浏览器，给程序员提供一致的编程体验，SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口，也就是说，我们在使用SocketIO时，不用担心兼容问题，底层会自动选用最佳的通信方式。因此说，WebSocket是SocketIO的一个子集。
引用自CSDN
所以我就直接使用SocketIO了。
先来整一个小的聊天室demo
地址：代码地址
（前提要有node环境）运行命令,下载需要的依赖（socket.io）
npm install socket.io --save
然后开启一个简单的服务器
index.js
//创建一个http服务器
var app = require('http').createServer()
// 把http封装成io对象
var io = require('socket.io')(app)
// 运行的服务器端口号
var PORT = 3000
var clientCount = 0
app.listen(PORT)
io.on('connection', function (socket) {
// 给每个用户取名字
clientCount++
socket.nickname = 'user' + clientCount
// io.emit代表广播，socket.emit代表私发
io.emit('enter', socket.nickname + ' comes in')
socket.on('message', function (str) {
io.emit('message', socket.nickname + ' says: ' + str)
})
// 客户端断开，自带事件
socket.on('disconnect', function () {
io.emit('leave', socket.nickname + ' left')
})
})
运行服务器
node index.js
然后是前端部分简易代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聊天室</title>
<!-- cdn -->
<script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script>
</head>
<body>
<h1>聊天室</h1>
<input id="sendTxt" type="text" />
<button id="sendBtn">发送</button>
<div id="recv"></div>
<script type="text/javascript">
var socket = io("ws://localhost:3000/");
//把接收的数据显示到界面
function showMessage(str, type) {
var div = document.createElement('div');
div.innerHTML = str;
if (type == "enter") {
div.style.color = 'blue';
} else if (type == "leave") {
div.style.color = "red"
}
document.body.appendChild(div)
}
// 点击之后发送
document.getElementById("sendBtn").onclick = function () {
var txt = document.getElementById("sendTxt").value;
if (txt) { // 文本不为空发送
socket.emit('message', txt);
}
}
// 第一个enter代表是进入事件，第二个enter为了显示需要
socket.on('enter', function (data) {
showMessage(data, 'enter')
})
socket.on('message', function (data) {
showMessage(data, 'message')
})
socket.on('leave', function (data) {
showMessage(data, 'leave')
})
</script>
</body>
</html>
将这个html双击在浏览器打开运行就行，保证node服务器运行中,这时候就可以
网友评论