概要:
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信 一 允许服务器主动发送信息给服务端。WebSocket是一种持久协议,TCP是一种非持久协议。
示例:
var socket = new WebSocket(url,[protocol])
var socket = new WebSocket('ws://localhost:3000')
socket.onopen = function(){
console.log("连接成功")
socket.send("hello")
}
socket.onmessage=function(e){
console.log(e)
console.log(e.data)
}
常用事件:
事件 |
功能 |
socket.onopen |
连接建立时触发 |
socket.onmessage |
客户端接收服务端数据时触发 |
socket.onerror |
通信发生错误时触发 |
socket.onclose |
连接关闭时触发 |
常用方法:
方法名 |
功能 |
socket.send() |
发送给服务器数据,必须是字符串 发送了数据,同时也接收了数据,用onmessage来接收 |
socket.close() |
关闭连接 |
websocket 后端部分: node.js
npm i nodejs-websocket -S
var ws = require("nodejs-websocket")
const port = 3000;
const server = ws.createServer(connect=>{
console.log("有用户连接上来了")
connect.on("text",function(data){
console.log(data)
connect.send(data)
connect.sendText(data.toUpperCase()+"!!!")
})
connect.on("close",function(code,reason){
console.log("Connection closed")
})
connect.on("error",function(){
console.log("用户连接异常")
})
})
function broadcast(msg){
server.connections.forEach(item=>{
item.send(msg)
})
}
server.listen(port,()=>{
console.log(`服务器已开启,端口号为${
port}`)
})
基于websocket的框架, socket.io, 分为后端和前端
后端部分:
npm i --save socket.io -S
const http = require("http")
const app = http.createServer()
var fs = require("fs")
app.on("request",(req,res)=>{
fs.readFile(__dirname+'/index.html',function(err,data){
if(err){
res.writeHead(500)
return res.end("Error loading index.html")
}
res.writeHead(200)
res.end(data)
})
})
app.listen(3000,()=>{
})
const io = require("socket.io")(app)
io.on("connection",socket=>{
socket.emit("hehe",{
name:"zs"})
socket.on("heihei",data=>{
console.log(data)
})
io.emit("addUser","发送的数据会给所有用户,每个用户都需要用socket.on注册addUser事件")
socket.on("disconnect",()=>{
})
})
前端部分:
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io("http://localhost:3000");
socket.on("hehe",function(data){
console.log(data);
})
socket.emit('heihei',{
my:'data'})
</script>
基于 express 框架,分为前端和后端两个部分
后端部分:
npm i socket.io express
var app1 = require("express")()
var server1 = require("http").Server(app)
var io1 = require("socket.io")(server1)
server1.listen(3000,()=>{
})
app1.use(require("express").static('public'))
app1.get("/",(req,res)=>{
res.redirect("/index.html")
})
io1.on("connection",function(socket){
socket.emit("news",{
hello:"world"})
socket.on("hehe",(data)=>{
console.log(data)
})
io1.emit("addUser","发送的数据会给所有用户,每个用户都需要有addUser这个事件")
})
前端部分:
这里的前端html是放在node后端写的,通过调用接口访问的html文件,因此引入js是直接引入的
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io("http://localhost:3000");
socket.on("hehe",function(data){
console.log(data);
})
socket.emit('heihei',{
my:'data'})
</script>