websocket【入门】
本文为websocket的入门篇，采用nodejs和原生js开发。
[参考链接1]（https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket#See_also）
[参考链接2](https://www.npmjs.com/package/nodejs-websocket)
简单介绍：
//创建websocket //'ws://localhost:2333' websocket连接地址 let socket = new WebSocket('ws://localhost:2333')
事件：
websocket还有几个个配套事件，分别是open(监听websocket连接)、send（发送消息）、message（监听和接收消息）、close（监听websocket关闭）、error（监听错误消息）
完整案例：
//前端 <!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>Document</title> <style> .msgbox{ width: 300px; height: 200px; border: 1px solid rgb(238, 120, 120); margin-top: 30px; overflow-y: auto; } </style> </head> <body> <input type="text" placeholder="输入:"> <button>发送</button> <div class="msgbox"></div> </body> <script> let oInput = document.querySelector('input'); let oBut = document.querySelector('button'); let oDiv = document.querySelector('.msgbox') //创建websocket let socket = new WebSocket('ws://localhost:2333') //连接成功 socket.addEventListener('open',()=>{ oDiv.innerHTML = '连接服务成功' }) //发送 oBut.addEventListener('click',()=>{ let value = oInput.value socket.send(value) oInput.value = '' }) //接受消息 socket.addEventListener('message',(e)=>{ console.log(e) // oDiv.innerHTML = e.data let data = JSON.parse(e.data) let dv = document.createElement('div') if(data.type == 0){ dv.style.color = "rgba(49, 226, 49, 0.39)" }else if(data.type ==1){ dv.style.color = "rgba(168, 168, 168, 0.658)" } dv.innerText =data.msg + ' ' + data.time.split(' ')[0] oDiv.appendChild(dv) }) </script> </html>
后端采用nodejs，需要先引入相关依赖包
1，新建文件夹，并新建app.js文件
2，在终端打开，在改文件夹目录下引入依赖包：npm install nodejs-websocket
//后端 //1，导入ndejs-websocket报 const ws = require('nodejs-websocket') const port = 2333 const TYPE_ENTER = 0 const TYPE_LEAVE = 1 const TYPE_MSG = 2 // 消息类型 // 0：进入聊天室 // 1：用户离开 // 2正常聊天 //记录用户 let count = 0 //2，创建一个server //2，1 处理用户发送的信息 //每次只要有用户连接，函数就会执行，给当前用户创建连接 //每个用户连接服务端就有一个 connect 对象 const server = ws.createServer(connect => { console.log('用户连接') count++ connect.userName = `用户${count}` //告诉所有用户，有人加入 broadcast({ type: TYPE_ENTER, msg: `${connect.userName}进入聊天室`, time: new Date().toLocaleTimeString() }) //每当接触到用户传递的数据，text事件就会触发 connect.on('text', data => { // console.log(data) //给用户一个响应的数据 //数据处理 broadcast({ type: TYPE_MSG, msg: `${connect.userName}:${data}`, time: new Date().toLocaleTimeString() }) // connect.send('服务端收到' + data) }) //websocket断开连接 connect.on('close', () => { console.log('连接断开'); count-- broadcast({ type: TYPE_LEAVE, msg: `${connect.userName}退出聊天室`, time: new Date().toLocaleTimeString() }) }) //注册error事件，处理用户错误信息 connect.on('error', () => { console.log('error') }) }) //广播，给所有用户发送消息 function broadcast(msg) { //server.connections : 所有用户 server.connections.forEach(item => { item.send(JSON.stringify(msg)) }) } server.listen(port, () => { console.log('websocket服务启动，监听' + port + '端口') })
