老师要求做一个仿探探 的小程序项目，我很不幸的成为了混子小组里的一个不那么混的混子，然后恰逢假期，学习了一下nodejs上传图片并将相对路径保存到数据库， 本以为完成这个就可以开摆，但我太天真了，几个老外比我还能摆，一放假就不知道迷失在了哪个窑子。只好再对聊天室，聊天功能小作研究，以下是我记录下的一些重点，以供大家参考。
websocket 实现简单的客户端与服务端连接
先放前端代码
<!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>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<input type="text" placeholder="输入你的内容">
<button>发送请求</button>
<div></div>
<script>
var input = document.querySelector('input')
var button = document.querySelector('button')
var div = document.querySelector('div')
//演示websocket在浏览器如何使用
// H5中已经提供了websocket的api 可以直接使用
var socket = new WebSocket('ws://localhost:3000');
//
socket.addEventListener('open',function() {
div.innerHTML = '连接服务成功'
})
button.addEventListener('click',function(){
var value = input.value
socket.send(value); //发送给服务器
})
socket.addEventListener('message',function(e) {
console.log(e.data)
div.innerHTML = e.data
})
socket.addEventListener('close',function() {
div.innerHTML = '服务断开链接'
})
</script>
</body>
</html>
后端代码： 注意这里需要npm install nodejs-websocket
// 导入nodejs-websocket
const ws = require('nodejs-websocket')
const PORT = 3000
// 创建一个server
// 每次只要有用户链接， 函数就会被执行，会给当前连接的用户创建一个connect对象
const server = ws.createServer(connect =>{
console.log('由用户链接了')
//每当接受到用户传递过来的数据，这个text事件会被触发
connect.on('text',data=>{
console.log('接受到数据：',data)
//给用户一个响应的数据
// 对用户发送过来的数据 可以直接进行处理
connect.send(data)
})
connect.on('close',()=>{
console.log('关闭链接')
})
connect.on('error',()=>{
console.log('用户连接异常')
})
})
server.listen(PORT,() =>{
console.log('websocket 服务启动成功了 监听'+ PORT)
})
需要注意的是， 在前端有这样的代码
var socket = new WebSocket('ws://localhost:3000');
用处是实例化一个socket对象，让他监听括号里的服务端，而括号内的服务端地址时在后端代码中生成的，因为后端调用了app.listen(3000)
利用以上代码，我们可以做到每当有新的链接产生时，服务端都可以接收到“有新的用户连接了”，并且客户端会自动显示以与服务端连接成功，输入的消息都会直接显示在聊天框内，实际上，客户端发送的信息被服务端处理后返回，并显示在自己的聊天框内，大家可以动手试一下， 新建文件夹，命令行输入npm init, 一直回车， 然后npm install 相应组件即可，这里只用安装nodejs-websocket。
如果你已经试过了 你就会发现，功能实现的太简单了，没有达到聊天室的效果，为此在改代码基础上做出改良版。 也是直接放代码。
<!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>
<style>
/* div {
width: 200px;
height: 200px;
border: 1px solid #000;
} */
</style>
</head>
<body>
<input type="text" placeholder="输入你的内容">
<button>发送请求</button>
<div></div>
<script>
var input = document.querySelector('input')
var button = document.querySelector('button')
var div = document.querySelector('div')
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
//演示websocket在浏览器如何使用
// H5中已经提供了websocket的api 可以直接使用
var socket = new WebSocket('ws://localhost:3000');
//
socket.addEventListener('open',function() {
div.innerHTML = '连接服务成功'
})
button.addEventListener('click',function(){
var value = input.value
socket.send(value); //发送给服务器
input.value=''
})
socket.addEventListener('message',function(e) {
// console.log(e.data)
// var dv = document.createElement('div')
// dv.innerText = e.data
// div.appendChild(dv)
var data = JSON.parse(e.data)
var dv = document.createElement('div')
dv.innerText = data.msg + '-----' + data.time
if(data.type === TYPE_ENTER) {
dv.style.color = 'green'
} else if(data.type === TYPE_LEAVE) {
dv.style.color = 'red'
} else {
dv.style.color = 'blue'
}
div.appendChild(dv)
})
socket.addEventListener('close',function() {
div.innerHTML = '服务断开链接'
})
</script>
</body>
</html>
后端：
const ws = require('nodejs-websocket');
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
//记录当前连接上的用户登录
let count = 0
const server = ws.createServer(conn =>{
console.log('新的连接')
count++
conn.userName = `用户${count}`
broadcast({
type: TYPE_ENTER,
msg: `${conn.userName}进入了聊天室`,
time: new Date().toLocaleDateString()
})
conn.on('text',data=>{
//2. 当接收到某个用户信息是，发给所有人
broadcast({
type: TYPE_MSG,
msg: data,
time: new Date().toLocaleTimeString()
})
})
conn.on('close',data=>{
//3.有人退出 告诉所有人
console.log('关闭连接')
count--
broadcast({
type: TYPE_LEAVE,
msg:`${conn.userName}离开了聊天室`,
time: new Date().toLocaleTimeString()
})
})
conn.on('error',data=>{
console.log('发生异常')
})
})
// 广播 给所有人发消息
function broadcast(msg) {
//server.connections : 表示所有的用户
server.connections.forEach(item=>{
item.send(JSON.stringify(msg))
})
}
server.listen(3000,()=>{
console.log('监听端口3000')
})
以上的代码实现了广播功能，从而达到了聊天室的雏形，感兴趣的可以试一试，我这里直接放图片：
