关于websocket前端的使用尝试——持续更新

第一次使用WebSocket,出现很多问题:特此记录。

举例:
先声明一个websocket,创建websocket的对象:
let webSocket = new WebSocket(“ws;//127.0.0.1:8800”)。
可以在浏览器上查看websocket的状态:
1、如果为0,代表正在连接。connecting
2、如果为1,代表连接成功。open
3、如果为2,代表连接正在关闭。closing
4、如果为3,代表连接已经关闭,或者打开失败。closed

使用webSocket发送数据:
webSocket.send(JSON.stringify({type:‘12312’}))
注意:此处send的数据只能是string类型。

之后使用事件监听,包括onopen,onclose,onmessage,onerror;
举例:
当有消息返回时,自动触发,并且调用function(e)函数
webSocket.onmessage = function(e){
console.log(e)
}
当成功后,有多个回调函数的话,可以使用webSocket.addEventListenter();
webSocket.addEventListenter(‘open’,function(event){webSocket.send(“hello websocket”);})

WebSocket是一种在单个TCP连接上进行全双工通信的协议,常用于实现实时应用程序,如在线聊天、游戏等。当你在浏览器中访问`ws://127.0.0.1`或`wss://127.0.0.1`这样的WebSocket服务器时,如果遇到跨域问题,通常是因为浏览器出于安全考虑,不允许同一个源(协议、域名和端口)的脚本与不同源的WebSocket服务器进行通信。 `127.0.0.1`是本地环回地址,通常用于测试环境。在开发阶段,由于浏览器的安全策略,可能会阻止从`http://localhost`或`https://localhost`以外的源请求WebSocket。解决跨域的方法有: 1. **CORS(Cross-Origin Resource Sharing)**:在服务器端设置响应头,允许特定来源的跨域请求,例如添加`Access-Control-Allow-Origin: *`允许所有来源,或者指定一个具体的源。 ```javascript // server.js (Node.js) const express = require('express'); const app = express(); app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); // ...其他WebSocket配置... app.listen(8080, () => console.log('WebSocket server listening on port 8080')); ``` 2. **JSONP**:对于不支持CORS的旧浏览器,可以使用JSONP(JSON with Padding)技术,通过动态创建`<script>`标签来绕过同源策略。 3. **代理**:在后端服务器(如Node.js)上设置一个代理,所有的WebSocket请求都通过它转发,这样可以在服务器端处理跨域问题。 4. **使用WebSocket库提供的解决方案**:一些WebSocket库,如socket.io,提供了客户端和服务器端的解决方案,可以自动处理部分跨域问题。 如果你在实际项目中遇到跨域问题,请确保你已经尝试了上述方法,并根据具体情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值