运行在浏览器中的WebSocket客户端+使用ws模块搭建的简单服务器
npm init
npm i -D ws
node index.js<script>
let ws = new WebSocket('ws://localhost:5000')
ws.onopen = function(evt){
console.log('连接开始');
ws.send('hello,我是客户端')
}
ws.onmessage = function(evt){
console.log(evt);
console.log('服务器传过来的消息：'+evt.data);
ws.close()
}
ws.onerror = function() {
console.log(" error");
}
ws.onclose= function() {
console.log("Socket closed.");
}
</script>//引入websocket模块
const WebSocket = require('ws')
//引用server类并实例化，定义服务器的端口
const wss = new WebSocket.Server({port: 5000 })
wss.on('connection',function(ws){
ws.on('message',function(message){
console.log("客户端发送的信息是"+message);
ws.send('hi,我接受到了你的消息我是服务器')
})
})socket.io
首先需要
npm init
npm i -D socket.io
npm i express
node app.js前端引入
<script src="/socket.io/socket.io.js"></script>常用api
.on('connection', function(socket){ })：与客户端建立连接时监听。
.on('disconnect', function(){ })：与客户端断开连接时监听。
.on('event-name', function(data) { })：监听客户端发来的消息。
.broadcast.emit('event-name', { })：向除自己外的所有其他用户广播消息。
.emit('event-name', { })：仅向当前连接的客户端（自己）推送消息。
服务端
io.on(‘connection’,function(socket));//监听客户端连接,回调函数会传递本次连接的socket
io.sockets.emit(‘String’,data);//给所有客户端广播消息
io.sockets.socket(socketid).emit(‘String’, data);//给指定的客户端发送消息
socket.on(‘String’,function(data));//监听客户端发送的信息
socket.emit(‘String’, data);//给该socket的客户端发送消息
利用socket.io实现的简陋聊天室
app.html
<!DOCTYPE html>
<html lang="zh">
<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>
.box {
width: 71%;
height: 500px;
margin-left: 200px;
border: 1px solid black;
}
.box div {
float: left;
}
.left {
height: 100%;
border-right: 1px solid #000;
width: 49%;
}
.left p {
color: #2c8406;
}
.right {
height: 100%;
width: 50%;
}
.right .userNum {
width: 200px;
height: 35px;
text-align: center;
/* background-color: pink; */
margin-left: 200px;
line-height: 35px;
font-size: 20px;
}
.right .nameData{
margin-top: 50px;
width: 700px;
font-size: 20px;
}
.inp {
width: 31%;
height: 30px;
border: 1px solid blue;
margin-left: 200px;
}
.send {
width: 3%;
height: 35px;
border: 1px solid pink;
}
.top {
width: 71%;
height: 200px;
margin-left: 200px;
background-color: rgb(74, 74, 108);
color: aliceblue;
text-align: center;
line-height: 200px;
font-size: 50px;
}
</style>
<!-- 引入socker.io -->
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
<div class="top">聊天室</div>
<div class="box">
<div class="left" overflow-y:auto>
</div>
<div class="right">
<div class="userNum">
</div>
<div class="nameData">
</div>
</div>
</div>
<form>
<input type="text" class="inp">
<button class="send">发送</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var socket = io();
//接收后端传来的在线人数信息
socket.on('userNum', (num) => {
// console.log(num);
$('.userNum').html(`<p>当前在线人数:${num}<p>`)
})
let userName = prompt('请输入你的昵称')
while (userName==''){
alert('昵称不能为空')
userName = prompt('请输入你的昵称')
}
socket.emit('joinName', userName)
socket.on('joinName', (obj) => {
$('.left').append($('<p>').html(`用户${obj.userName}${obj.status}了聊天室`))
})
$('.send').click(function () {
socket.emit('send', $('.inp').val())
$('.inp').val('')
return false //阻止跳转
})
socket.on('send', (msg) => {
$('.left').append($('<h5>').html(`${msg.name} : ${msg.msg}`))
})
socket.on('leave', (obj) => {
$('.left').append($('<p>').html(`用户${obj.userName}${obj.status}了聊天室`))
})
</script>
</body>
</htmlapp.js
const express = require('express')
const http = require('http')
const app = express()
const server = http.createServer(app)
const io = require('socket.io')(server)
var userNum = 0 //当前在线人数
// 开启端口监听socket
server.listen(process.env.PORT || 3000, () => console.log('app listening on port 3000'))
io.on('connection', (socket) => {
userNum++
console.log('有' + userNum + '用户链接了');
io.emit('userNum', userNum)
//接受前端传过来的聊天信息
socket.on('send',(msg)=>{
io.emit('send',{
name:socket.nickName,
msg:msg
})
})
//当用户进入聊天室
socket.on('joinName',(userName)=>{
socket.nickName = userName
io.emit('joinName',{
userName,
status:'进入'
})
})
socket.on('disconnect', function(){
userNum--
io.emit('userNum', userNum)
io.emit('leave',{
userName:socket.nickName,
status:'离开'
})
})
})
app.get('/', (req, res) => {
res.sendFile(__dirname + '/app.html')
io.emit('userNum', userNum)
})