socket的运行步骤

在这之前用node.js的环境配置
1、在app.js中设置引入socket.io文件

var express = require('express');
var app = express();
var server = require('http').Server(app);(自己添加的)
var io = require('socket.io')(server);(自己添加的)

2、在index.html中写入输入框和要用的按钮

html代码片段
        <input type="" name="" id="info">
        <button type="" id="btn2">登录</button>
        <button id="btn">发送</button>
        <ul id="ul"></ul>
js代码片段
var socket = io.connect('http://localhost:9000');
var username = ""
      btn2.onclick = function(){
        username = info.value;
        socket.emit("login",username)
        info.value =""
      }
      btn.onclick = function(){
        socket.emit("info",info.value);
        info.value =""
      }
      socket.on('msg', function (name,data) {
        var node = document.createElement("li")
        if(name == username){
            node.style.textAlign = "right"
        }
        node.innerHTML = name+":"+data;
        ul.appendChild(node);
      });

3、在app.js中监听并广播html发送过来的数据

io.on('connection', function (socket) {
      socket.on("login",function(username){
        socket.name = username;
      });

       socket.on('info', function (data) {
        //console.log(data);
        io.emit("msg",socket.name,data)
      });
});

server.listen(9000);

4、在cmd命令行中执行nodemon app.js
在浏览器中打开localhost:9000

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,993评论 19 139
  • Web领域的实时推送技术,也被称作Realtime技术。这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时...
    潘良虎阅读 44,672评论 6 78
  • 个人入门学习用笔记、不过多作为参考依据。如有错误欢迎斧正 目录 简书好像不支持锚点、复制搜索(反正也是写给我自己看...
    kirito_song阅读 2,505评论 1 37
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,595评论 25 708
  • 去年《解救吾先生》上映的时候,由于种种原因没有去看,昨天闲来无事,翻出来看。 电影情节还算紧凑,影帝的演技也毋庸置...
    鏡天阅读 1,197评论 1 4