写在前面
最近对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是官网上的介绍，我自己加了昵称和连线断线提示，你也可以试着写出来；
- 用户是否在线提示；
- 正在输入提示；
- 私人消息；