WebSocket

最新推荐文章于 2025-05-08 19:13:31 发布

原创最新推荐文章于 2025-05-08 19:13:31 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #git #html5

web前端专栏收录该内容

14 篇文章

订阅专栏

`WebSocket`

WebSocket可以实现客户端与服务端之间的实时通讯。它是基于web的长连接通讯协议。

网络通讯过程中的长连接与短连接

短连接通讯模式：客户端向服务端发请求建立连接，连接成功后，客户端向服务端发送请求数据包，服务端接收请求处理请求，返回响应数据包后连接断开。客户端接收后处理后续业务。

优点：大量节省服务端连接资源。使得服务端可以为更多的客户端处理业务。

长连接通讯模式：客户端向服务端发请求建立连接，连接成功后，客户端向服务端发送请求数据包，服务端接收请求处理请求，返回响应数据包后连接不断开。客户端接收后处理后续业务。连接将持续保持，这样可以实现随时随地客户端与服务端之间的数据交互。

优点：实现客户端与服务端的即时通讯。用于实现某些必要的业务场景：网页聊天、网页游戏等。

如何使用javascript代码来建立客户端与服务端之间的websocket长连接？

`Socket.io`

socket.io可以完成网页中的js（客户端）与后台nodejs（服务端）的websocket长连接的建立与数据通讯。

建立`websocket`连接

服务端

新建一个后端项目。（创建一个文件夹socketserver）

下载安装包，安装nodejs。
https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi
换npm源
npm config set registry https://registry.npm.taobao.org

通过命令行，进入项目目录，初始化npm项目。

cd socketserver
npm init -y  (将会生一个package.json描述当前项目的基本信息)
# 安装socket.io
npm install --save socket.io

编写服务端的核心index.js文件，监听端口，用接收客户端发过来的websocket连接请求。

// index.js
const http = require('http').createServer()
const socketio = require('socket.io')(http)

// socketio提供了on方法用于监听客户端建立websocket连接事件，
// 一旦websocket连接建立成功，将会触发connection事件，执行回调方法
socketio.on('connection', function(socket){
    // socket对象用于与链接成功的客户端进行数据交互  可以通过socket完成数据的发送与接收
    console.log('连接成功，有客户端进来了！'+socket.id)
})

http.listen(5050, ()=>{
    console.log('服务已经启动...')
})

客户端

新建html页面。通过script标签引入socket.io.js（在node_modules下有该js文件）。

node_modules/socket.io/client-dist/socket.io.min.js

通过socket.io.js提供的方法，向服务端发请求，请求建立websocket连接。

// 向目标地址请求建立websocket连接
let socket = io('http://localhost:5050/')

客户端与服务端之间的通信

客户端向服务端发消息

客户端发消息

let socket = io('http://localhost:5050/')
// 发消息(自定义消息类型，消息内容)
socket.emit('textmsg', '你瞅啥？！')

服务端接收消息

socketio.on('connection', function(socket){
	// 监听客户端发过来的消息(消息类型， 回调方法)
    socket.on('textmsg', function(data){
        console.log(data)
    })
})

服务端向客户端发消息

服务端发消息

socket.on('textmsg', function(data){
	socket.emit('textmsg', '消息内容')
})

客户端接收消息

let socket = io('http://localhost:5050/')
socket.on('textmsg', function(data){...})

服务端向所有客户端广播消息

socketio.emit('textmsg', '兄弟们，抄家伙，干他！')

实现简易的群聊天室

下载chatserver.zip。

整理业务场景与实现思路：

实现群聊。
1. 当打开群聊页面时，建立websocket连接，每当有客户端连接成功，即当做进入该群聊天室。
2. 点击发送按钮，可将自己写的消息，发送给服务端，由服务端转发给聊天室的所有人。
3. 客户端接收服务端返回的消息，显示在聊天记录列表中。
统计并更新在线人数。
1. 在服务端维护一个全局变量：count=0；用于表示当前在线人数。
2. 服务端一旦监听到客户端连接成功，count++
3. 服务端一旦监听到客户端连接断开，count–
4. 只要count一有变化，就需要向所有客户端发消息（countmsg），更新在线人数。
5. 客户端接收countmsg消息，更新人数即可。

实现群聊天室

在聊天页面加载完毕后建立websocket连接。
点击发表按钮，实现发送消息。
接收服务端发回来的消息，显示在聊天记录区。
细节处理。
更新在线人数。
1. 在服务端全局声明一个变量：count，表示当前在线人数。
2. 每当有客户端连接成功，count++。
3. 每当有客户端断开连接，count--。
4. 无论连接成功还是断开，都需要向所有客户端发一个消息：
```
socketio.emit('countChange', count)
```
5. 客户端监听countChange消息，收到后，更新当前在线人数。
登录。
发消息时需要携带当前用户信息，这样聊天室的所有人接收到信息后才知道这一条消息是谁发送的，头像是什么。
```
let msg = message.value
socket.emit('textmsg', {
    msg, name, avatar
})
```