websocket简单聊天室

时间 2019-11-08

标签 websocket 简单聊天室繁體版

原文原文链接

websocket是一种新的网络通讯协议，2008年诞生，2011年成为标准，几乎全部浏览器都已经支持了。websocket的出现主要就是解决HTTP协议的缺陷，只能由客户端发起。websocket是一种在单个TCP链接上实现全双工通讯。css

在websocket以前，咱们有好几个旁门左道的方法实现客户端和服务端长链接：html

轮询：设置定时器，每隔多长时间就请求一次，或者没次请求响应的方法里面立刻发起请求。两个方法都有很大的缺点，耗时耗性能，还容易出问题。node

iframe方法：web

iframe的src属性采用的是get方法，咱们使用iframe方式去实现长链接，服务端就不能断开，也就是不能end，使页面一值在加载的状态。npm

EventSource流，这个方法其实我是没听过，据说兼容性和性能也很很差。跨域

直到websocket出来以后，客户端和服务端创建长链接变得简单并且性能好。支持双向通讯，数据头部小，还能跨域。兼容性也没什么太大问题。注意，websocket虽然借助http，可是二者是有很大差异的。浏览器

socket.io，是对websocket的封装，不只是客户端，服务端也实现了。若是，有人真的用了很古老的浏览器不支持websocket，socket.io会经过能够支持的方法，其实就是轮询或者iframe等去实现。bash

今天分享一个聊天室的demo，没太多关于API的东西。websocket

npm init -y初始化网络

npm install socket.io -D安装依赖

建立server.js：

const http= require('http');

const server= http.createServer(function(req, res){});

const io = require('socket.io')(server);

io.of('/').on('connection',function(socket){

  socket.on('clinetmsg',function(msg){

    io.sockets.emit('servermsg', `${msg.name}：${msg.msg}`);

    console.log(msg)

  });

});

server.listen(3000);
复制代码

而后建立两个html，为了区分，两个html只是名字不一样：

<body>

<input type="text" id="client">

<button onclick="send()">发送</button>

<ul style="list-style: none" id="msgList"></ul>

<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>

<script>

  const socket= io.connect('http://192.168.164.31:3000');

  socket.on('servermsg',(data)=>{

    var node = document.createElement("li");

    var textnode = document.createTextNode(data);

    node.appendChild(textnode);

    document.getElementById("msgList").appendChild(node);

  });

  function send() {

    var msg = document.getElementById('client').value;

    socket.emit('clinetmsg', {name: 'Tom', msg: msg});

  }

</script>

</body>
复制代码

启动服务端：node server.js，而后能够开始聊天了：

很简单的聊天室demo，须要注意的也就只是两个端emit的名字和on的名字须要对应。固然，真正的聊天室很是复杂，无论是样式仍是后台逻辑都很复杂，这边只是实现websocket的通讯。