Socket 为客户端和服务器提供了双向通信机制 ，即服务器接受消息并把消息推送给连接了服务器的客户端。
安装
npm install --save socket.io
npm install --save express
创建一个server.js
//引用
const express = require('express')
const socketIo = require('socket.io')
//创建express实例，相当于开启一个web服务器
const app = express()
//创建路由
app.get('/', (req, res) => {
res.sendFile(__dirname + '/startWebSocket/index.html')
})
//启动web服务
server = app.listen(3000);
let index = 0;//没有登录，所以用数字代表访问服务端的客户端
const io = socketIo.listen(server)//绑定于3000端口
//事件：'连接'在客户端连接时被触发
io.on("connection", socket => {
console.log('有客户端连接进来了');
//console.log(socket);
//给当前实例添加个 username
socket.username = ++index;
// 给其他实例发送消息 即以广播的形式
socket.broadcast.emit("message", {
username: 'System',
message: `${socket.username} 加入了聊天室`
});
console.log(socket.username);
//监听客户端发来的消息
socket.on("message", message => {
socket.emit("message", {
username: socket.username,
message: message
});
// 给其他人发
socket.broadcast.emit("message", {
username:socket.username,
message: message
});
});
})
创建一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基于 Node.JS 的 web 框架 express--聊天应用</title>
</head>
<body>
<ul id="messages">
<!-- <li>vv</li>
<li>vv</li> -->
</ul>
<input id="information" autocomplete="off"> <button id="btn">发送</button> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- 1. 引入 socket.io.js 文件 -->
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
// 1. 监听服务端发送过来的消息
socket.on("message", data => {
let html = `
<li><span>${data.username}</span><span>${data.message}</span></li>
`;
$('#messages').append(html)
});
$('#btn').on('click',function(){
var value = $('#information').val();
socket.emit("message",value)
})
</script>
</body>
</html>
