实现一个简单的WebSocket聊天室
Websocket简介
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
为什么传统的HTTP协议不能做到WebSocket实现的功能？这是因为HTTP协议是一个请求－响应协议，请求必须先由浏览器发给服务器，服务器才能响应这个请求，再把数据发送给浏览器。换句话说，浏览器不主动请求，服务器是没法主动发数据给浏览器的。
使用Socket.io
Socket.io是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5
socket.io特点
- 实时分析：将数据推送到客户端，这些客户端会被表示为实时计数器，图表或日志客户。
- 实时通信和聊天：只需几行代码便可写成一个Socket.IO的”Hello,World”聊天应用。
- 二进制流传输：从1.0版本开始，Socket.IO支持任何形式的二进制文件传输，例如：图片，视频，音频等。
- 文档合并：允许多个用户同时编辑一个文档，并且能够看到每个用户做出的修改。
具体事件和方法参见：https://www.w3cschool.cn/socket/
后端代码
使用node.js + express快速搭建一个服务器，引入Socket.io ，代码如下：
var app = require("express")();
var http = require('http').Server(app);
//引入socket.io
var io = require('socket.io')(http);
//加载前端页面
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html');
});
//连接socket
var userName = '';
io.on('connection',function(socket){
console.log('a user connected:'+socket.id);
userName = socket.id.substr(0,10);
socket.broadcast.emit('chat message','欢迎用户: ' + userName + '加入房间');
socket.on('disconnect',function(){
console.log('user disconneted');
});
socket.on('chat message',function(data){
io.emit('chat message',data);
console.log('message : ' + data.msg);
});
});
http.listen(3000,function(){
console.log('listening on *:3000');
});
前端代码
Socket.IO chat
效果展示
浏览器上打开多个窗口，便可进行对话