用node+socket.io+HTTP做一个聊天室。聊天室主要由两部分构成,服务器(index.js)以及客户端(index.html)。
文件目录如下所示:
(node_modules文件夹以及package-lock.json为安装依赖使时的自动生成)
一、安装依赖
当运行服务器时,cmd会自动提醒你所需安装的库,此时,在当前目录下用npm即可安装。
在聊天室项目中,所需库有express以及socket.io。
express模块用于搭建服务器,socket.io模块用于前后端传递消息
npm install express
npm install socket.io
二、服务器(index.js)
1、引入模块
引入express模块
var express = require('express'); //引入express模块
var app = express(); //创建一个 Express 应用。express()是一个由express模块导出的入口(top-level)函数。
引入http模块,createServer创建用于接收http客户端请求并返回响应的http服务器应用程序。
var server = require('http').createServer(app);
引入socket.io模块
var io = require('socket.io')(server);
注:1、require方法根据模块路径查找模块, 如果是完整路径, 直接引入模块。
2、以下两段代码含义相同。
var app = require('express')();
var express = require('express'); //引入express模块
var app = express();
2、添加访问地址
/** 添加一个index的访问地址 */
app.get('/index', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
使服务器监听3003端口
server.listen(3003,function(){
console.log('server start')
});
结合所用的http协议,以及端口与访问地址,可知所用网址为:
http://localhost:3003/index.html
(localhost为本地网址)
服务器与客户端交互在四进行讲解
三、客户端(index.html)
网页一般由三部分构成,html提供大概框架,CSS主要用于格式的美化改变,而JavaScript主要是网页的功能部分,它可以被封装于函数中间接调用,也可以在script标签中直接进行编写。
四、服务器与客户端的交互
服务器
//注释段主要用于检验客户端与服务器相互通信是否可以正常进行,类似服务器与客户端通信的死循环
io.on('connection', function (socket) { //监听客户端
socket.emit('news', 'helloClient'); //客户端连接时发送news事件
socket.on('online', function (data) { //监听客户端连接online事件
console.log(data)
// socket.emit('news', 'hello');
});
});
客户端
<script>
var socket = io.connect('http://localhost:3003');//页面初始化时向服务器发起连接
socket.on('news', function (data) {//客户端news事件监听
console.log(data);
socket.emit('online','helloServer');//连接成功时发送online事件
});
</script>
五、 最终效果
1、启动服务器
2、打开客户端
一定要输入网址打开 http://localhost:3003/index.html
右键点击检查打开控制台,发现消息已接收。
此时服务器也接收到消息
因我刷新了一次网页,相当于服务器连接了客户端两次,故有两个helloServer
大家可以自行检测下客户端与服务器连续相互通信情况
完整代码
服务器(index.js)
var express = require('express'); //引入express模块
var app = express(); //创建一个 Express 应用。express()是一个由express模块导出的入口(top-level)函数。
var server = require('http').createServer(app);
var io = require('socket.io')(server);
/** 添加一个index的访问地址 */
app.get('/index', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function (socket) { //监听客户端
socket.emit('news', 'helloClient'); //客户端连接时发送news事件
socket.on('online', function (data) { //监听客户端连接online事件
console.log(data)
// socket.emit('news', 'hello');
});
});
server.listen(3003,function(){
console.log('server start')
});
客户端(index.html)
<!DOCTYPE html>
<html>
<head>
<title>简易聊天室</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<script>
var socket = io.connect('http://localhost:3003');//页面初始化时向服务器发起连接
socket.on('news', function (data) {//客户端news事件监听
console.log(data);
socket.emit('online','helloServer');//连接成功时发送online事件
});
</script>
</body>
</html>