一、什么是socket
网络上的两个程序通过一个双向的通信连接实现数据的交换，这个连接的一端称为一个socket
二、socket通信流程
image.png
三、NET核心模块对socket支持
1、SocketServer.js
var net = require('net')
var chatServer = net.createServer(),
clientMap = new Object()
var i = 0 // 连接名称的流水号
chatServer.on('connection', function(client) {
console.log('客户端有人连接~')
client.name = ++i
clientMap[client.name] = client
// 对客户端发送消息的监听
client.on('data', function(data){
console.log('客户端传来' + data)
broadcast(data, client)
})
// 数据错误事件处理
client.on('error', function(e){
console.log('client error' + e);
client.end()
})
// 客户端关闭事件
client.on('close', function() {
delete clientMap[client.name]
console.log(client.name + '下线了')
broadcast(lient.name + '下线了', client)
})
})
chatServer.listen(9001)
// 消息广播
function broadcast(message, client) {
for (var key in clientMap) {
clientMap[key].write(client.name + 'say' + message + '\n')
}
}
2、SocketClient.js
var net = require('net')
var port = 9001
var host = '127.0.0.1'
var client = new net.Socket()
client.setEncoding = 'UTF-8'
// 连接服务器
client.connect(port, host, function() {
client.write('你好')
})
client.on('data',function(data) {
console.log('服务端传来' + data)
say()
})
client.on('error', function(err) {
console.log('error' + err)
})
client.on('close', function() {
console.log('connection closed')
})
const readline = require('readline')
const r1 = readline.createInterface({
input: process.stdin,
output: process.stdout
})
function say() {
r1.question('请输入：', (inputStr) => {
if (inputStr != 'bye') {
client.write(inputStr + '\n')
} else {
client.distroy() //关闭连接
}
})
}
四、浏览器原生支持的webSocket
1、WsServer.js
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({port: 9001})
var clientMap = new Object()
var i = 0
wss.on('connection', function(ws) {
console.log(ws + '上线')
ws.name = ++i
clientMap[ws.name] = ws
ws.on('message', function(message) {
broadcast(message, ws)
})
ws.on('close', function() {
global.gc() // 调用内存回收
console.log('离开')
})
})
function broadcast(msg, ws) {
for (var key in clientMap) {
clientMap[key].send(ws.name + '说：' + msg)
}
}
2、WsClient.js
var ws = new WebSocket('ws://127.0.0.1:9001/')
ws.onopen = function() {
ws.send('大家好')
}
ws.onmessage = function(event) {
var chatroot = document.querySelector('#chatroom')
chatroot.innerHTML += '<br />' + event.data
}
ws.onclose = function() {
alert('Closed')
}
ws.onerror = function(err) {
alert('Error' + err)
}
3、wsclient.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>WebSocket</h1>
<div id="chatroom" style="width: 400px;height: 300px;overflow: auto;border: 1px solid blue">
</div>
<input type="text" name="sayinput" value="" id="sayinput">
<input type="button" name="send" id="sendbutton" value="发送">
<script src="WsClient.js" charset="UTF-8"></script>
<script type="text/javascript">
function send() {
ws.send(sayinput.value)
sayinput.value = ''
}
document.onkeyup = function (event) {
if (event.keyCode == 13) {
send()
}
}
sendbutton.onclick = function() {
send()
}
</script>
</body>
</html>
image.png
五、socket.io.兼容性
1、SocketioServer.js
var app = require('express')()
var http = require('http').Server(app)
var io = require('socket.io')(http)
var fs = require('fs')
app.get('/', function(req, res){
function callback(data) {
res.send(data.toString())
}
fs.readFile('./socketIoClient.html', function(err, data) {
if (err) {
console.log(err)
callback('文件不存在')
} else {
callback(data)
}
})
})
// app.get('/socket.io.js')
// socket.io的设置
// 在线用户
var onlineUsers = {}
// 当前在线人数
var onlineCount = 0
var i = 0
io.on('connection', function(socket) {
console.log('有人连上来了~')
// 监听新用户的加入
socket.name = ++ i
onlineUsers[socket.name] = socket
// 监听用户退出
socket.on('disconnect', function(socket) {
console.log('有人退出')
delete onlineUsers[socket.name]
})
// 监听用户发布聊天内容
socket.on('message', function(msg) {
broadcast(msg, socket)
})
})
function broadcast(msg, socket) {
for (var key in onlineUsers) {
onlineUsers[key].send(socket.name + '说' + msg)
}
}
http.listen(9001, function() {
console.log('listening on *:9001')
})
2、SocketioClient.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="socket.io.js" charset="UTF-8"></script>
<title>socketIoClient</title>
</head>
<body>
<script type="text/javascript">
var iosocket = null
window.onload = function () {
iosocket = io.connect('http://localhost:9001')
iosocket.on('connect', function() {
iosocket.send('hello,from ioclient')
})
iosocket.on('message', function(message) {
var chatroom = document.querySelector('#chatroom')
chatroom.innerHTML += message + '<br/>'
})
iosocket.on('disconnect', function() {
console.log('服务端关闭')
})
function send() {
iosocket.send(sayinput.value)
sayinput.value = ''
}
document.onkeyup = function (event) {
if (event.keyCode == 13) {
send()
}
}
sendbutton.onclick = function() {
send()
}
}
</script>
<h1>socket.io</h1>
<div id="chatroom" style="width: 400px;height: 300px;overflow: auto;border: 1px solid blue">
</div>
<input type="text" name="sayinput" value="" id="sayinput">
<input type="button" name="send" id="sendbutton" value="发送">
</body>
</html>
image.png
网友评论