用node搞一个聊天室
在工作中用到的node除了打包和nuxt.js之外还没有用到node。今天用node搞了一个简单的聊天室，目录结构如下：
index.html:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</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; background: #eee;}
#messages .myself{
text-align: right;
background: green;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>发送</button>
</form>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var name = prompt("请输入你的昵称：");
var socket = io()
//发送昵称给后端
socket.emit("join", name)
document.title = name + "的群聊" //new addition
//收到服务器发来的join事件时
socket.on("join", function (user) {
addLine(user + " 加入了群聊")
})
//接收到服务器发来的message事件
socket.on("message", function(msg) {
var user = msg.split(':')[0];
var ismyself = user == name?true:false
addLine(msg,ismyself)
})
function addLine(msg,ismyself) {
ismyself?$('#messages').append($('<li class="myself">').text(msg)):$('#messages').append($('<li>').text(msg))
}
$('form').submit(function () {
var msg = $("#m").val() //获取用户恮的信息
socket.emit("message",name+':'+msg) //将消息发送给服务器
$("#m").val("") //置空消息框
return false //阻止form提交
})
</script>
</html>server.js:
var app = require('express')(); //引入express库
var http = require('http').Server(app); //将express注册到http中
//new addition
var io = require('socket.io')(http);
//当访问根目录时，返回Hello World
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
var usocket = []; //全局变量
io.on('connection', function(socket){
console.log('a user connected')
//监听join事件
socket.on("join", function (name) {
usocket[name] = socket
io.emit("join", name) //服务器通过广播将新用户发送给全体群聊成员
})
//new addition
socket.on("message", function (msg) {
io.emit("message", msg) //将新消息广播出去
})
});
//启动监听，监听3000端口
http.listen(3000, function(){
console.log('listening on *:3000');
});原理就是使用socket.io进行监听，当自己发出去消息时，服务器通过广播发送给所有用户。当用户接收到消息时，将dom元素插入到页面中。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-10-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读