websocket笔记
webSocket本身不存在跨域问题,所以我们可以利用webSocket来进行非同源之间的通信。
websocket如何实现跨域通信?
- 原理:利用webSocket的API,可以直接new一个socket实例,然后通过open方法内send要传输到后台的值,也可以利用message方法接收后台传来的数据。后台是通过new WebSocket.Server({port:3000})实例,利用message接收数据,利用send向客户端发送数据。具体看以下代码:
- 代码:
- 本地域打开socket.html
- WebSocket是高级api,不兼容,但是可以使用socket.io这个库,这个库做了兼容处理
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!--
高级api 不兼容 但是有一个socket.io这个库,是兼容的(一般用这个)
-->
<script type="text/javascript">
let socket = new WebSocket("ws://localhost:3000");//ws协议是webSocket自己创造的
socket.onopen = function(){
socket.send("我叫俞华");
}
socket.onmessage = function(e){
console.log(e.data);//你好,我叫俞华!
}
</script>
</body>
</html>
- 起一个服务端
- 一般起的服务是http服务,但是websocket需要起ws服务,ws是webSocket自己定义的。
/*
要使用ws协议,那么就要装一个ws的包
*/
let express = require("express");
let app = express();
let WebSocket = require("ws");
let wss = new WebSocket.Server({port:3000});
wss.on("connection",function(ws){//先连接
ws.on("message",function(data){//用message来监听客户端发来的消息
console.log(data);//俞华
ws.send("你好,"+data+"!");
})
})
如何保证websocket的通信会话是唯一的?
- 建立WebSocket链接的url上加上时间戳。
实现跨域的9种方法(点击可跳转详情页面)
- jsonp
- cors
- postMessage
- document.domain
- window.name
- location.hash
- http-proxy 后续会有详细文章阐述
- nginx 后续会有详细版块阐述
- websocket