一:什么是WebSocket?
WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。
其他特点包括:
(1)建立在 TCP 协议之上,服务器端的实现比较容易。
(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
(3)数据格式比较轻量,性能开销小,通信高效。
(4)可以发送文本,也可以发送二进制数据。
(5)没有同源限制,客户端可以与任意服务器通信。
(6)协议标识符是ws
(如果加密,则为wss
),服务器网址就是 URL。
而socket.io则使websocket应用的开发变得简单。
二:用express+socket.io搭建websocket聊天室服务器
1 .用npm初始化服务器程序npm init -y
2.要使用node安装express,socket.io等模块才能搭建websocke服务器npm install express socket.io
3.创建app.js作为服务器的入口
// 使用 express 来开启服务器
var express = require('express')
var app = express()
var http = require('http').createServer(app)
var io = require('socket.io')(http) app.use(express.static(__dirname))
// 设置请求的路径:
app.get('/', (req, res) => {
// 返回 index.html 作为客户端
res.sendFile(__dirname + '/index.html') })
// 开启 weboscket io.on('connection', socket => {
console.log('有用户连接上来了')
socket.on('sendval', val => {
// val.msg
// 这个函数就是接收到数据之后的回调函数
console.log(socket)
console.log('客户端发送的消息为:' + val.msg)
// 将浏览器发送的消息,原样返回
io.emit('sendval', val) }) })
// 开启监听:端口 3000 ip 地址: localhost/127.0.0.1
http.listen(3000, () => { console.log('listening on *:3000')
})
4.创建用于浏览器访问服务器的客户端HTML页面
<!doctype html>
<html>
<head> <title>Socket.IO chat</title> </head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
<!-- 导入 socket.io和jquery -->
<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/3.0.0-rc4/socket.io.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
var socket = io('http://localhost:3000/')
$('form').submit(function (e) {
e.preventDefault()
// 发送
socket.emit('sendval', { msg: $('#m').val() })
// 将输入框内容清空
$('#m').val('') })
// 接收服务器的消息
socket.on('sendval', val => {
// 将消息渲染到页面上
$('#messages').append($('<li>').html(val.msg)) })
})
</script>
</html>
4.最终形成下面的一些文件
5 运行程序node app.js
三:运行效果
通过浏览器访问 localhost:3000
发送消息,服务器原样返回,使用jquery将消息渲染到页面上