websocket 的基本使用

概要:

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信 一 允许服务器主动发送信息给服务端。WebSocket是一种持久协议，TCP是一种非持久协议。

示例：

// 参数一： 连接的url地址
// 参数二:  可选，指定连接的协议
// 例如： var socket = new WebSocket('ws://echo.websocket.org')  或 localhost:3000      
var socket = new WebSocket(url,[protocol])

var socket = new WebSocket('ws://localhost:3000') 
socket.onopen = function(){
    console.log("连接成功")
    
    // 数据发送成功, (这个放在外边写报错了)
    socket.send("hello")
}   
// 数据发送后也会把数据再发送回来，用 onmessage 接收
socket.onmessage=function(e){
    console.log(e)
    console.log(e.data)    //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;

// 每次有用户连接成功，回调函数都会执行一遍且给当前连接的用户创建一个connect对象
const server = ws.createServer(connect=>{
	console.log("有用户连接上来了")

	// 每当接收到用户传递过来的数据，text事件都会被触发
	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")
	})

	// 处理用户的错误信息，用户断开连接时会报错，所以需要有error事件
	connect.on("error",function(){
		console.log("用户连接异常")
	})
})

//server.connections  所有连接的用户列表
//每次用户连接、发送信息、断开连接时调用一次，即可实现将实时信息发送给所有用户
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)

// 监听用户连接的事件
// socket 表示用户的连接
io.on("connection",socket=>{
	// socket.emit 方法表示触发浏览器的方法并携带数据
	// 触发前端的socket的hehe方法，方法名字可以随便起
	// 参数1：前端注册的事件名
	socket.emit("hehe",{name:"zs"})

	// 注册事件，等待客户端触发
	socket.on("heihei",data=>{
	console.log(data)
})

// 可以给所有连接的用户发送信息
io.emit("addUser","发送的数据会给所有用户，每个用户都需要用socket.on注册addUser事件")

// 监听用户断开连接，这个事件名是固定的。
socket.on("disconnect",()=>{ })
})

前端部分：

// 这里的前端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>

基于 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,()=>{})

// 将public目录设置成静态资源目录
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");
	// 注册事件，等服务端触发。 这里的 hehe 方法名字是随便定义的，只要与后端一一对应就行
	socket.on("hehe",function(data){
		console.log(data);
	})

	// 触发后端的事件并携带数据
	socket.emit('heihei',{my:'data'})
</script>