es6模块化，websoket（附简易聊天室源码）以及webpack的详细使用
Posted 爱敲代码的狼仔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了es6模块化，websoket（附简易聊天室源码）以及webpack的详细使用相关的知识，希望对你有一定的参考价值。
一、es6模块化
1.1 使用es6模块化步骤：
(1) 使用export暴露数据
(2) 使用import引入模块
(3) 在html中引入js文件，注意为script的属性设置 type="module"
1.2 export
1.2.1 暴露
单个暴露语法1：
export let 变量1=值1;
export var 变量2=值2;
export function(){}
...
批量暴露语法2：
let 变量1 = 值1;
let 变量2 = 值2;
function 方法名(){}
...
export {变量1,变量2,方法名,,}
描述：暴露多个数据，注意变量的名称和暴露的名称一致
1.2.2 引入
语法：
import { 变量 } from 文件
import { 变量 as 新变量名 } from 文件
描述：加载模块
1.3 export default
1.3.1 暴露
默认暴露语法：
export default 内容
描述：只暴露一个数据
注意：默认暴露在同一个文件中能使用一次
1.3.2 引入
语法：
import 变量 from "文件路径"
二、websocket
2.1 websocket介绍【重点】
websocket是HTML5新增的协议，使用websocket协议可以使客户端与服务器进行双向通信，也就是除了客户端可以发送消息给服务器外，服务器也可以主动推送消息给客户端。
在websocket之前可以使用ajax+定时器来实现聊天室的这种类似功能。
2.2 socket.io模块
使用步骤：
(1)下载socket.io
npm install socket.io@2
(2)使用express搭建服务器并配置socket.io
(3)配置客户端
(4)访问服务器建立连接
(5)业务代码
2.3 常用方法
2.3.1 webSocket
语法：
let webSocket = require('socket.io')
webSocket(server)
描述：返回socket.io对象，参数server为app.listen返回的server对象
2.3.2 io
语法：
io( websocket服务器地址 )
描述：客户端与服务器端建立连接
2.3.3 on：接收消息
语法1：
io.on( 'connect',callback )
描述1：语法1为当用户连接服务器则触发connect事件，注意：前端需要 io( websocket服务器地址 )
语法2：
websocketObj.on( event,callback )
描述2：语法2为客户端兼听服务器端发送过来的消息，也可以是服务器端兼听客户端发过来的消息
2.3.4 emit：发送消息
语法1：
websocketObj.emit( 事件,消息对象 )
描述1：触发事件并发送消息
语法2：
io.sockets.emit(事件,消息对象)
描述2：触发所有客户端兼听的事件并发送消息
2.3.5 join：加入房间
语法：
webSocketObj.join(房间id,事件回调)
描述：加入房间
2.3.6 to：将消息发送到指定的房间中
语法：
io.to( 房间号 ).emit( 事件,消息对象 )
描述：触发对象房间号的用户事件，并发送消息
2.4 群聊
服务端的代码：
const express = require('express');
const path = require('path');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
//监听事件：是否有新的websocket连接
io.on('connection', (socket) => {
//接收客户端发送的消息：
socket.on('chat', d => {
//console.log(d, 999);
//服务器将接收到的消息推送给所有客户端：io.emit()
io.emit('rechat', d);
});
});
server.listen(3000);
//处理用户登录聊天室
app.get('/login', (req, res) => {
let { usr = '' } = req.query;
if (usr == '') {
res.send(`<script>alert('用户名不能为空');location.href='login.html';</script>`);
return;
}
res.cookie('UNAME', usr); //将用户名保存到cookie中
res.send(`<script>location.href='2-chat.html';</script>`);
});
//开放静态资源
app.use(express.static(path.join(__dirname, 'www')))客户端的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="socket.io/socket.io.js"></script>
<style>
div {
position: fixed;
left: 20px;
bottom: 20px;
background-color: blanchedalmond;
padding: 10px;
}
</style>
</head>
<body>
<ul>
<!-- <li>XXX说：???</li>
<li>XXX说：???</li> -->
</ul>
<div>
<input type="text" id="msg">
<input type="button" value="发送" id="btn">
</div>
<script>
let socket = io(); //创建websocket连接
let btnObj = document.getElementById('btn');
let msbObj = document.getElementById('msg');
let ulObj = document.getElementsByTagName('ul')[0];
btnObj.onclick = function() {
let curUser = ''; //当前已登录的用户名
let cookieValue = document.cookie; //获取cookie
if (cookieValue.indexOf('UNAME') == -1) { // 未登录
alert('请先登录');
location.href = 'login.html';
} else { //已登录
let arr = cookieValue.split(';');
for (let val of arr) {
if (val.indexOf('UNAME') != -1) {
let arr2 = val.split('=');
curUser = arr2[1];
}
}
}
let msgVal = msbObj.value; //获取用户输入的聊天内容
if (msgVal != '') {
socket.emit('chat', `${curUser}说：${msgVal}`); //发送消息给服务器
}
}
//客户端接收服务器推送的消息：
socket.on('rechat', data => {
//console.log(data, 1111);
ulObj.innerHTML = `<li>${data}</li>` + ulObj.innerHTML;
});
</script>
</body>
</html>2.5 分区(分房间)通信
服务端的代码如下：
const express = require('express');
const path = require('path');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', (socket) => {
// console.log( socket.handshake.query );
let roomid = socket.handshake.query.roomid //接收房间号
//2. 当前连接上的用户加入某一个房间
socket.join(roomid, () => {
// console.log('加入房间成功：' + roomid)
socket.emit('event1', '加入成功')
})
socket.on('front_message1', (message) => {
// console.log(message, 8888);
io.to(roomid).emit('server_message1', message) //点对点
})
})
server.listen(3000);
//托管静态资源
app.use(express.static(path.join(__dirname, 'www')));客户端代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="roomid" placeholder="输入房间号">
<button id="rooms">加入房间</button>
<input type="text" id="msg" placeholder="输入消息内容">
<button id="btn">发送消息</button>
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
let socket = null
//1. 点击加入房间按钮，然后和socket服务器建立连接
$('#rooms').click(function() {
if ($('#roomid').val() == '') {
alert('请输入房间号')
return
}
//创建连接，并且告诉服务器要加入一个房间
socket = io('http://localhost:3000?roomid=' + $('#roomid').val());
// 客户端兼听事件
socket.on('server_message1', (message1) => {
console.log(message1)
})
//服务端加入房间后触发此事件，告诉客户端
socket.on('event1', (message) => {
alert(message)
})
})
$('#btn').click(function() {
if (!socket) {
alert('请加入一个房间')
return
}
//触发服务器端的事件，发送消息
socket.emit('front_message1', $('#msg').val())
})
</script>
</body>
</html>三、webpack
3.1 webpack概念
Webpack 前端资源模块化管理和打包工具。可以将许多松散的模块按进行打包成线上环境所需的前端资源。同时webpack依赖node环境 。webpack对一些模块的版本要求非常严格
注意：webpack是前端开发者需要的一个工具。
开发环境：
生产环境：
3.1.1为什么学习webpack
3.2 准备工作
webpack官网 webpack 中文文档 | webpack 中文网
(1)安装node
(2)安装webpack和webpack-cli , npm i webpack@4 webpack-cli@3 -g
(3)检查webpack是否安装成功 , webpack --version
3.3 webpack核心介绍
| 键名 | 概念 | 解释 |
|---|---|---|
| context | 入口起点 | 基础目录，绝对路径，用于从配置中解析入口起点(entry point) |
| entry | 入口 (必须) | 配置打包入口文件的名字 |
| output | 出口 (必须) | 打包后输出到哪里, 和输出的文件名 |
| module | 加载器配置 | 在rules对应数组中, 定义对象规则 |
| plugins | 插件配置 | 配置插件功能（插件有着webpack不具备的某些功能，比如：压缩html文件） |
3.3.1 webpack.config.js 语法格式
module.exports = {
context:入口起点,
entry:入口,
output:{
path:出口目录,
filename:文件名,
},
module: {
rules: [
加载器规则
]
},
plugins:[
插件
]
}
3.4 webpack使用
3.4.1 初识webpack进行打包js
3.4.2 css处理
loader的认识
步骤：
css-loader 3版本 style-loader 2版本
npm i css-loader@3 style-loader@2 -D
devDependencies：
dependencies：
module: {
rules: [
{
test: /\\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
3.4.3 分离css
extract-text-webpack-plugin@next 插件
安装下载
npm i extract-text-webpack-plugin@next -D
加载器修改配置
const ExtractTextPlugin = require("extract-text-webpack-plugin");
rules: [ // 加载器的使用规则
{
test: /\\.css$/,
use: ExtractTextPlugin.extract({ // 从一个已存在的 loader 中，创建一个提取(extract) loader。
fallback: "style-loader",
use: "css-loader" // loader被用于将资源转换成一个CSS单独文件
})
}
]
插件配置
new ExtractTextPlugin("style.css"), // 输出的文件名
报错说明：
Error: Cannot find module 'webpack/lib/Chunk'
解决方案：在项目目录下下载webpack@4
3.4.4 打包less
-
需要安装less 和 less-loader 来解析less代码, 和加载less文件
npm i less@3 less-loader@7 -D
-
在webpack.config.js中 配置加载器, 解析.less文件
{ test: /\\.less$/, use: ['style-loader', 'css-loader', "less-loader"] } -
但是这样发现css代码没有分离出来, 所以还需要使用extract-text-webpack-plugin的配置, 分离出css代码
{ test: /\\.less$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ['css-loader', "less-loader"] }) } -
观察打包后style.css中多了less文件里的样式代码
3.4.5 生成html
html-webpack-plugin插件。
下载
npm i html-webpack-plugin@4 -D
注意：插件需要显示的引入到webpack.config.js中
plugins属性
plugins:[
new HtmlWebpackPlugin({ // 插件配置对象
filename: "index.html", // 产出文件名(在dist目录查看)
template: __dirname + "/index.html", // 以此文件来作为基准(注意绝对路径, 因为此文件不在src下)
favicon: "./assets/favicon.ico", // 插入打包后的favicon图标
minify: { //对html文件进行压缩，
collapseBooleanAttributes: true, //是否简写boolean格式的属性如：disabled="disabled"简写为disabled
minifyCSS: true, //是否压缩html里的css（使用clean-css进行的压缩） 默认值false
minifyJS: true, //是否压缩html里的js（使用uglify-js进行的压缩）
removeAttributeQuotes: true, //是否移除属性的引号 默认false
removeComments: true, //是否移除注释 默认false
removeCommentsFromCDATA: true, //从脚本和样式删除的注释, 默认false
}
}) // 数组元素是插件的new对象
]
如果报错说明
Cannot find module "webpack/lib/node/NodeTeplatePlugins"
在安装html-webpack-plugin插件的工程中, 单独的在本地安装一下跟全局webpack对应的版本
npm i webpack@4 -D
3.4.6 静态资源处理
-
需要下载2个加载器模块
-
url-loader、file-loader
-
下载：
npm i url-loader@4 file-loader@6 -D
注意: webpack认为, 图片也是一个模块, 所以才需要loader来解析图片)
2.webpack.config.js加载器配置:
在module中加上此配置。
{
test: /\\.(png|jpg|jpeg|gif|svg)$/, // 处理这些结尾的文件
use: 'url-loader'
}
// 如果处理字体图标需要引入这个
{
test: /\\.(woff2?|eot|ttf|otf)(\\?.*)?$/,
loader: 'url-loader'
}
3.4.7 jquery使用
在webpack打包的项目中, 使用jQuery功能
-
下载jquery模块,
npm i jquery
-
在main.js中引入jquery,
import $ from 'jquery'
3.4.8 热更新
-
webpack-dev-server会实时监听文件变化, 自动打包到内存中, 而不是生成硬盘上的dist目录
-
webpack-dev-server 它还会启动一个本地的服务器, 来支持你访问打包后的html网页
-
下载webpack-dev-server -g
-
npm i webpack-dev-server -g
-
webpack-dev-server --version
-
-
在项目下运行 命令: webpack-dev-server 可启动热更新服务器, 会根据目录下的webpack.config.js,只是在内存中运行起来了。
-
注意: 如果修改了配置(webpack.config.js)文件, 还是需要重启终端, 如果是src下的代码, 会自动打包
-
注意: 默认需要打包输出的文件名必须为 index.html文件
-
默认在端口号:8080上启动我们热更新服务器, 项目都在这个服务器上打开访问
-
当开发完毕还需要使用webpack命令进行打包到dist目录 。
webpack.config.js配置：
devServer: { // 在这里可以对webpack-dev-server进行一些配置
port: 9090, //修改端口号，默认为8080
open: true, // 自动调用默认浏览器打开
}
以上是关于es6模块化，websoket（附简易聊天室源码）以及webpack的详细使用的主要内容，如果未能解决你的问题，请参考以下文章