【教程】使用NodeJS和SocketIO
让我们开发一个简单的Nodejs＋SocketIO的AppChat！
每个技术的官方网站：
– Node.js
– Socket.io
使用过的技术版本
EJS: 2.6.1
Express: 4.16.3
Socket.io: 2.1.1
JQuery: 3.3.1
Node.js: 10.14.1
Socket.io 的中文释义是套接字.io。
项目目录
请在终端中输入npm init→npm install express ejs socket.io来开始。
然后，让我们创建以下类似的目录！
.
├── public
│ ├── jquery-3.3.1.min.js
│ └── layout.css
│ └── main.js
├── views
│ └── home.ejs
├── server.js
├── package.json
在Jquery的官方网站上下载文件，然后将其复制到公共目录。
编码
body {
background-color: #e75400;
}
#wrapper {
width: 600px;
}
#username {
background-color: transparent;
border: solid 1px black;
}
#left, #right {
min-height: 30%;
}
#left {
width: 30%;
float: left;
background-color: #99d88c;
}
#right {
width: 70%;
float: right;
background-color: #f5f788;
text-align: right;
}
#box-title {
border: solid 1px black;
padding: 5px;
text-align: center;
font-weight: bold;
}
#box-content {
border: solid 1px black;
padding: 5px;
border-top: none;
text-align: center;
}
#list-message {
height: 200px;
background-color: #fcb3f0;
margin-bottom: 15px;
overflow-y: scroll;
resize: none;
}
#message {
width: 85%;
}
#send-message {
width: 13%;
}
var express = require('express');
var app = express();
app.use(express.static('./public'));
app.set('view engine', 'ejs');
app.set('views', './views');
var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(process.env.PORT || 3000);
var arrayUser = [];
io.on('connection', function(socket) {
console.log('Client ' + socket.id + ' connected');
socket.on('client-send-username', function(data) {
if(arrayUser.indexOf(data) >= 0) {
socket.emit('server-send-fail');
} else {
arrayUser.push(data);
socket.username = data;
socket.emit('server-send-success', data);
io.sockets.emit('server-send-array-user', arrayUser);
}
});
socket.on('logout', function() {
arrayUser.splice(arrayUser.indexOf(socket.username), 1);
socket.broadcast.emit('server-send-array-user', arrayUser);
});
socket.on('user-send-message', function(data) {
io.sockets.emit('server-send-message', {
username: socket.username,
message: data
});
});
socket.on('user-typing-message', function() {
socket.broadcast.emit('server-send-typing', socket.username);
});
socket.on('user-stop-typing-message', function() {
socket.broadcast.emit('server-send-stop-typing', socket.username);
})
})
app.get('/', function(req, res) {
res.render('home');
})
只有把所有socket.io处理的代码放进io.on函数内，代码才能运行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Demo chat app </title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<div id="wrapper">
<div id="login-form">
<h3> What is your name ? </h3>
<input type="text" id="username" name="username" >
<input type="button" value="Register" id="register" >
</div>
<div id="chat-form">
<div id="left">
<div id="box-title">
Online Users
</div>
<div id="box-content">
</div>
</div>
<div id="right">
<div id="welcome">
Hello <span id="current-user"> </span>
<input type="button" id="logout" name="" value="Logout">
</div>
<div id="list-message" scrollable>
</div>
<div id="input-message">
<input type="text" id="message" name="" placeholder="Input message here">
<input type="button" id="send-message" name="" value="Send">
</div>
</div>
</div>
</div>
</body>
</html>
为了在main.js中使用socket.io，在home.ejs中需要包含socket.io的CDN链接。
var socket = io('http://localhost:3000');
$(document).ready(function() {
$('#login-form').show();
$('#chat-form').hide();
socket.on('server-send-fail', function() {
alert('The username is already exists !');
});
socket.on('server-send-success', function(data) {
console.log(data);
$('#current-user').html(data);
$('#login-form').hide(2000);
$('#chat-form').show(1000);
});
socket.on('server-send-array-user', function(data) {
$('#box-content').html('');
data.forEach(function(username) {
$('#box-content').append('<div class="user-online"> ' + username + '</div>');
});
});
socket.on('server-send-message', function(data) {
$('#list-message').append('<div>' + data.username + ': ' + data.message + '</div>');
});
socket.on('server-send-typing', function(data) {
$('#list-message').append('<div id="' + data + '">' + data + ' is typing message ... </div>');
});
socket.on('server-send-stop-typing', function(data) {
$('#'+data).remove();
});
$('#register').click(function() {
socket.emit('client-send-username', $('#username').val());
});
$('#logout').click(function() {
socket.emit('logout');
$('#login-form').show(1000);
$('#chat-form').hide(2000);
});
$('#send-message').click(function() {
socket.emit('user-send-message', $('#message').val());
});
$('#message').focus(function() {
socket.emit('user-typing-message');
});
$('#message').focusout(function() {
socket.emit('user-stop-typing-message');
});
})
重要事件
1. 客户端发送用户名：点击”注册”按钮后，将发出事件。
– 服务器发送成功：如果注册的名称不存在。
– 服务器发送失败：如果注册的名称已存在。
2. 注销：发送事件以进行登出。
3. 用户发送消息。
4. 用户正在输入消息。
5. 用户停止输入消息。
结果 (jié guǒ)
