网络协议科普: WebSocket本文正在参与 “网络协议必知必会”征文活动 WebSocket介绍，websocket

本文正在参与 “网络协议必知必会”征文活动

WebSocket介绍

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

其他特点包括：

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

ws://example.com:80/some/path

综合案例：聊天室

创建项目目录 chat
npm init -y 初始化 package.json 文件
npm install express
写入以下代码

const express = require('express')
const app = express()
const http = require('http').Server(app)

app.get('/', function(req, res){
  res.send('<h1>Hello world</h1>');
})

http.listen(3000, () => {
  console.log('listening on *:3000')
})

启动服务测试
服务静态网页

将 app.get(/) 代码替换为以下内容

app.use(express.static('./public'))

测试页面访问
使用 Socket.IO
- 安装 npm i socket.io
服务端代码修改如下

const express = require('express')
const app = express()
const http = require('http').Server(app)
const io = require('socket.io')(http)

app.use(express.static('./public/'))

io.on('connection', socket => {
  console.log('a user connected');
})

http.listen(3000, () => {
  console.log('listening on *:3000')
})

在网页中

<script src="/socket.io/socket.io.js"></script>
<script>
  // 默认链接当前网页地址，也就是 ws://localhost:3000
  var socket = io()
</script>

刷新网页测试效果
每一个 socket 都有一个 disconnect 事件

io.on('connection', function(socket){
  console.log('a user connected')
  socket.on('disconnect', () => {
    console.log('user disconnected')
  })
})

刷新网页测试效果
客户端发送消息

socket.emit('chat message', 'hello');

服务端接收消息

socket.on('chat message', function(msg){
  console.log('message: ' + msg);
});

测试
给当前连接 socket 发送消息

socket.emit('request', '消息');

服务端发送广播消息

如果你想向除了某个套接字以外的所有人发送消息

socket.broadcast.emit('hi');

将消息发送给所有人，包括发送消息的客户端

io.emit('chat message', msg)

客户端接收消息

socket.on('chat message', function(msg){
  $('#messages').append($('<li>').text(msg));
});

测试
其它功能
当有人连接或断开连接时，向连接的用户广播消息
添加对昵称的支持
不要向发送它的用户发送相同的消息。而是在他按下回车后直接附加消息
添加“{user}正在输入”功能。显示谁在线。添加私人消息。

网络协议科普: WebSocket

WebSocket介绍

综合案例：聊天室

相关链接