WebSocket的使用指南---前端-Toy模板网

这篇具有很好参考价值的文章主要介绍了WebSocket的使用指南---前端。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1：WebSocket概述、

WebSocket 是 HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 WebSocket 通信协议于2011年被IETF定为标准RFC 6455，WebSocketAPI 被 W3C 定为标准。在 WebSocket API 中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

使用：创建Wevsocket实例化

const hanclick=(()=>{   //点击是触发方法


  const ws = new WebSocket('ws://localhost:8000');  //创建Wevsocket实例化
  ws.onerror = function () {  
      console.log("失败了");          //建立失败的函数
    };

 const data={
  id: new Date().getTime(),
    user:username,
    dateTime: new Date().getTime(),
    msg:state.msg
 }
// 当连接建立成功，触发 open 事件
ws.onopen = function(evt) {
  console.log("建立连接成功 ...");
  // 连接建立成功以后，就可以使用这个连接对象通信了
  // send 方法发送数据
  ws.send(JSON.stringify(data));
};

// 当接收到对方发送的消息的时候，触发 message 事件
// 我们可以通过回调函数的 evt.data 获取对方发送的数据内容
ws.onmessage = function(evt) {
  console.log("接收到消息: " +JSON.stringify(evt.data));

然后开启一个后端服务我用的是no.js

创建index.js

const  WebSocket =require('ws') // 实例化ws

const server= new WebSocket.Server({port:8000})  //端口号8000和前端保持一样
server.on('connection',ws=>{         // on是ws的后端方法，看自己， connection是用来返回成功链接到的函数
  console.log("链接到了兄弟");
           
  ws.on('close',()=>{
  console.log("走了，不连了"); // close是用来断开的函数

启动服务器

后端终端前端触发点击事件发送数据；

前端websocket怎么用,websocket,网络协议,网络,node.js