写在前面
最近对websocket很感兴趣,今天从头看了一下node的SOCKET.IO并且写了一个小demo在这记录一下;
项目创建
- 首先创建一个文件夹用来存放我们的项目;
- 在项目文件夹中创建一个package.json文件,描述我们项目的清单文件;
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {
"express": "^4.15.2",
"socket.io": "^3.0.1"
}
}
- 然后安装我们所需要的插件(用到了express和socket.io);
npm i
- 创建一个index.js文件,用来存放我们demo的后台代码;
var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html'); //页面载入我们同级下的index.html
});
io.on('connection', (socket) => { // 用户连接事件
//有用户接入打印
console.log('a user connected,一个用户已连接');
//socket.broadcast.emit(); //此方法给除了做动作的人推送数据 ,(比如我登录了,给群友推送XXX登陆了,但是不用给我推送);
//socket.on('chat message s', (msg) => {});//监听客户端的"chat message s"方法,用来接受客户端传来的信息;
socket.broadcast.emit('hi','有新人来了,赶快聊起来吧'); //给除了自己之外的人推送消息,第二个参数可以动态,我这里以一句话代表;
//用户发信息事件
socket.on('chat message s', (msg) => {//客户端发送,接收客户端的数据
console.log(msg);//在命令行打印客户端发来的消息
io.emit('chat messagee', msg); //给已连接用户发送数据(接受到一个人的消息后给所有在线的用户推送);
});
// 用户断开事件
socket.on('disconnect', () => {
console.log('user disconnected,用户断开');
socket.broadcast.emit('hi','有人断线了,等他一下吧');
});
});
http.listen(3000, () => {
console.log('listening on *:3000');//监听3000端口
});
- 下面我们在同级下创建一个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: 0.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; }
#messages li:nth-child(odd) { background: #eee;}
</style>
</head>
<body>
<p>我的昵称:<input type="text" name="" id="name" value=""></p>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
<script src="/socket.io/socket.io.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
<script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(e) {
e.preventDefault(); // prevents page reloading 防止页面重新加载
socket.emit('chat message s', { //给服务器端传数据
msg:$('#m').val(),
name:$("#name").val() ?$("#name").val() :'我不告诉你我是谁'
}); //给服务端发送数据
$('#m').val('');
console.log($("#name").val())
return false;
});
socket.on('chat messagee', function(msg){ //监听服务端推送数据
//console.log('aaaa');
$('#messages').append($('<li>').html(`
<span style="color: red;">${msg.name}:</span><span style="color: #ccc;">${msg.msg}</span>
`));//来数据了载入页面中
});
socket.on('hi', function(msg){ //监听推送消息(详情见index.js)
// console.log('hai');
$('#messages').append($('<li>').html(`
<p style='text-align:center;'>${msg}</p>
`));//来数据了载入页面中
});
});
</script>
</html>
- 下面我们在文件夹下打开命令行,执行一下这个index.js;
node index.js
- 然后我们会看见命令行上打印出 ‘listening on *:3000’,这说明我们的js已经启动成功了;
- 下面我们打开浏览器输入 ‘http://localhost:3000’
- 这样我们会在命令行看到 ‘a user connected,一个用户已连接’,这就说明我们已经连接成功了,然后可以再打开一个窗口,就会显示有两个人连接成功了;
- 好了到这里你就已经拥有了这个demo;
写在最后
这个demo是官网上的介绍,我自己加了昵称和连线断线提示,你也可以试着写出来;
- 用户是否在线提示;
- 正在输入提示;
- 私人消息;