Socket.IO为WebSockets这个较新的web技术提供了必要的支持，包含客户端与服务端模块，以便建立通信通道，当然也可作为中间件而存在。
1 创建一个express项目
????????? ????? 防工具盗链抓取【如果显示此文字，代表来自第三方转发】 freddon所有 ??? ???????????
可以使用命令行初始化一个express项目
先安装express
npm install express npm install express-generator express 项目名 cd 项目名 npm install socket.io
也可以在webstorm下新建express项目 File- new Project - Node.js Express App
创建好后文件视图大概是这样
2 服务端修改默认的文件内容
修改routes文件夹下的index.js为 chat.js
var express = require(‘express‘);
var router = express.Router();
var socket_io = require(‘socket.io‘);
/* GET users listing. */
router.get(‘/‘, function (req, res, next) {
res.send(‘respond with a resource‘);
});
router.prepareSocketIO = function (server) {
var io = socket_io.listen(server);
io.sockets.on(‘connection‘, function (socket) {
socket.on(‘join‘, function (user) {
socket.user = user;
socket.emit(‘state‘, ‘SERVER‘, true);
socket.broadcast.emit(‘state‘, ‘SERVER‘, user + ‘上线了‘);
});
socket.on(‘sendMSG‘, function (msg) {
socket.emit(‘chat‘, socket.user, msg);
socket.broadcast.emit(‘chat‘, socket.user, msg);
});
});
};
module.exports = router;
修改app.js中
var index = require(‘./routes/index‘); app.use(‘/index‘, index);
为
var chat = require(‘./routes/chat‘); app.use(‘/chat‘, chat);
接下来就需要在app.js中写一个方法了，用来传递server
app.ready=function(server){
chat.prepareSocketIO(server);
};
module.exports = app;
进入bin/www,添加内容：
var server = http.createServer(app); app.ready(server); //添加这句
3 客户端
网页配合socket.io,网页client.html置于public文件夹下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="/socket.io/socket.io.js"></script>
<style>
table {
width: 100%;
}
table.tool {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
}
#content {
height: auto;
padding: 10px;
padding-bottom: 32px;
}
#content tr {
margin-bottom: 10px;
}
#textContent {
border: 1px solid grey;
border-radius: 5px;
padding: 6px;
}
.left {
width: 88%;
}
#send {
width: auto;
padding: 2px 12px;
line-height: 26px !important;
border-radius: 5px;
font-weight: bold;
color: white;
background-color: #ff4400;
}
tr.align-left td > span {
float: left;
}
tr.align-left td > span span {
display: inline-block;
}
tr.align-right td > span {
float: right;
}
tr.align-right td > span span {
display: inline-block;
}
span.msg {
padding: 6px;
background-color: #00B7FF;
border: 1px solid #00B7ee;
border-radius: 5px;
}
.timer {
display: block;
text-align: center;
}
</style>
</head>
<body>
<div>
<table id="content">
</table>
</div>
<table class="tool">
<tr>
<td class="left">
<div id="textContent" contenteditable="true" type="text"></div>
</td>
<td>
<button id="send">发送</button>
</td>
</tr>
</table>
<script>
var socket = io.connect(‘http://127.0.0.1:3000‘);
var userName = "访客某某";
socket.on(‘connect‘, function () {
userName = prompt("请输入你的姓名?") || userName;
socket.emit(‘join‘, userName);
});
socket.on(‘chat‘, function (user, data) {
var p = document.createElement(‘tr‘);
var direct = ‘align-left‘;
if (user === userName) {
direct = ‘align-right‘;
p.innerHTML = ‘<td><span><span >‘ + data + ‘</span> <span>‘ + user + ‘</span></td><span></span>‘;
} else {
p.innerHTML = ‘<td><span> <span>‘ + user + ‘</span> <span>‘ + data + ‘</span><span></span></td>‘;
}
p.className = direct;
$(‘#content‘).appendChild(p);
});
$(‘#send‘).addEventListener(‘click‘, function (target) {
var content = $(‘#textContent‘).innerHTML;
if (content = content.replace(" ", "")) {
socket.emit(‘sendMSG‘, content);
$(‘#textContent‘).innerHTML = "";
}
});
function $(flag) {
return document.querySelector(flag);
}
</script>
</body>
</html>
4 测试
www文件中默认端口号为3000
运行bin/www
cd bin node www
或者在webstorm中右键Run ‘bin/www‘
接下来，使用浏览器开两个(+)标签访问 http://localhost:3000/client.html （如果测试局域网，将localhost替换为服务器的ip，下同）
首先分别输入用户，然后就可以输入文字进行聊天啦，其他的上线、消息提醒功能我删掉了，仅保留聊天。
放张效果图：
可能出现的问题：
网页加载socket.io 404
请不要修改script中的src ，如果不是用端口3000访问
如 http://localhost:63342/项目/public/client.html 请修改socket.io script的 src 为
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
本例代码已经比较少了，嫌麻烦的话需要源码请Email ：[email protected];
转载请注明 ：http://my.oschina.net/freddon/blog/529599
时间： 2024-08-05 05:49:09